martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-22 01:25:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling sidebar identity

Browse Source
This commit is contained in:
Roland Osborne 2022-03-22 13:07:43 -07:00
parent 2be89bf306
commit 8e2a7c214d
6 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
net/web/src/User/Profile/Profile.styled.js
View File

@ -6,7 +6,6 @@ export const ProfileWrapper = styled.div`
width: 100%;
height: 100%;
background-color: #f6f5ed;
border-radius: 2px;
flex-direction: column;
align-items: center;
overflow: hidden;
@ -16,8 +15,10 @@ export const ProfileWrapper = styled.div`
width: 100%;
flex-direction: row;
align-items: center;
background-color: #dddddd;
height: 72px;
background-color: #ddeedd;
height: 64px;
padding-right: 16px;
padding-left: 16px;
}
.title {

3
net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
View File

@ -4,8 +4,5 @@ import styled from 'styled-components';
export const ContactsWrapper = styled.div`
width: 100%;
flex-grow: 1;
border-radius: 8px;
background-color: #f6f5ed;
border-top: 1px solid #8fbea7;
border-right: 1px solid #8fbea7;
`;

24
net/web/src/User/SideBar/Identity/Identity.jsx
View File

@ -1,6 +1,6 @@
import { Avatar, Image } from 'antd';
import React from 'react'
import { IdentityWrapper, MenuWrapper } from './Identity.styled';
import { IdentityWrapper, IdentityDropdown, MenuWrapper } from './Identity.styled';
import { RightOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
import { useIdentity } from './useIdentity.hook';
import { Menu, Dropdown } from 'antd';
@ -35,20 +35,18 @@ export function Identity() {
return (
<IdentityWrapper>
<Dropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="rightTop">
<div>
<div class="container">
<div class="avatar">
<Logo />
</div>
<div class="username">
<span class="name">{ state.name }</span>
<span class="handle">{ state.handle }</span>
</div>
<RightOutlined />
<IdentityDropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="rightTop">
<div class="container">
<div class="avatar">
<Logo />
</div>
<div class="username">
<span class="name">{ state.name }</span>
<span class="handle">{ state.handle }</span>
</div>
<RightOutlined />
</div>
</Dropdown>
</IdentityDropdown>
</IdentityWrapper>
)
}

22
net/web/src/User/SideBar/Identity/Identity.styled.js
View File

@ -1,13 +1,15 @@
import { Menu, Button } from 'antd';
import { Menu, Button, Dropdown } from 'antd';
import styled from 'styled-components';
export const IdentityWrapper = styled.div`
border-top: 1px solid #8fbea7;
border-right: 1px solid #8fbea7;
border-bottom: 1px solid #8fbea7;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
background-color: #f6f5ed;
.container {
display: flex;
@ -38,8 +40,8 @@ export const IdentityWrapper = styled.div`
.avatar {
color: #888888;
font-size: 3em;
width: 64px;
height: 64px;
width: 48px;
height: 48px;
border-radius: 6px;
overflow: hidden;
display: flex;
@ -63,3 +65,11 @@ export const MenuWrapper = styled(Menu)`
border-radius: 4px;
`;
export const IdentityDropdown = styled(Dropdown)`
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 16px;
padding-right: 16px;
`;

5
net/web/src/User/SideBar/SideBar.styled.js
View File

@ -5,11 +5,8 @@ export const SideBarWrapper = styled.div`
height: 100%;
max-width: 300px;
min-width: 200px;
border: 1px solid #8fbea7;
border-right: 1px solid #8fbea7;
background-color: #8fbea7;
display: flex;
flex-direction: column;
padding-top: 2px;
padding-left: 4px;
padding-bottom: 4px;
`;

8
net/web/src/User/User.styled.js
View File

@ -20,8 +20,8 @@ export const UserWrapper = styled.div`
.connect {
position: absolute;
width: 33%;
height: 33%;
width: 40%;
height: 40%;
object-fit: contain;
}
@ -31,10 +31,6 @@ export const UserWrapper = styled.div`
justify-content: center;
width: 100%;
height: 100%;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
z-index: 1;
}
`;