diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html index 4c4bd682..d9114857 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html +++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html @@ -1,5 +1,5 @@
- + - 내프로필 +
+ + + + +
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss index 209015a3..6b5b3019 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss +++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss @@ -1,26 +1,50 @@ .myprofile { - position: absolute; - display: flex; - flex-flow: column; - justify-content: center; - height: 80px; - width: 68px; + position: relative; + flex-flow: row; + width: 60px; + height: 30px; bottom: 10px; color: #ffffff; font-size: 11px; - text-align: center; + justify-items: flex-end; + margin: 0 10px; .myprofile-img { display: block; border-radius: 10px; - height: 42px; - width: 42px; + height: 30px; + width: 30px; background-color: #efefef; - align-self: center; - margin-bottom: 6px; - - .thumbnail { - border-radius: 10px; + &.thumbnail-mask { + border-radius: 50%; + width: 30px; + height: 30px; + overflow: hidden; + .thumbnail { + width: 30px; + height: auto; + } + } + } + .btn-setting { + position: absolute; + bottom: 0; + display: inline-flex; + justify-items: flex-end; + left: 20px; + .presence { + display: inline-block; + bottom: 0; + width: 10px; + height: 11px; + border: 1px solid #ffffff; + align-self: flex-end; + } + svg { + padding-left: 6px; + &.on { + transform: rotate(180deg); + } } } }