diff --git a/client/src/Home.scss b/client/src/Home.scss index a96d4d9..47bb7be 100644 --- a/client/src/Home.scss +++ b/client/src/Home.scss @@ -1,3 +1,5 @@ +@import "./common"; + #Home { display: flex; flex-direction: row; @@ -49,9 +51,7 @@ padding-left: 1rem; font-size: 1.15rem; - border-radius: 7px; - border: 1px solid #E0E0E0; - box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.05), 2px 2px 0px 0px rgba(0, 0, 0, 0.025); + @include border-shadow; &.active { background-color: #EFEFEF; diff --git a/client/src/Post.scss b/client/src/Post.scss index 4ebdbf5..f24a115 100644 --- a/client/src/Post.scss +++ b/client/src/Post.scss @@ -1,3 +1,5 @@ +@import "./common"; + .post { display: flex; flex-direction: column; @@ -8,15 +10,14 @@ margin: 1rem 0; min-height: 3rem; + @include border-shadow; + &.postEditing { padding: 0; - - &:focus-within { - border-color: mediumpurple; - outline: solid mediumpurple 2px; - } - min-height: 6rem; + border: 1px solid #D0D0D0; + + @include post-editor; } .text { @@ -25,6 +26,7 @@ .footer { margin-top: 0.3rem; + margin-bottom: -0.3rem; font-size: 0.7rem; color: #A0A0A0; diff --git a/client/src/Profile.scss b/client/src/Profile.scss index e7e34ac..1aa22a1 100644 --- a/client/src/Profile.scss +++ b/client/src/Profile.scss @@ -1,14 +1,18 @@ +@import "./common"; + .profileView { min-width: 100%; display: flex; flex-direction: column; + .profileInfo { min-width: 100%; border-bottom: solid gray 1px; border-right: solid gray 1px; border-bottom-right-radius: 7px; padding: 2rem; + box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.05), 2px 2px 0px 0px rgba(0, 0, 0, 0.025); display: flex; flex-direction: column; @@ -29,14 +33,10 @@ margin: 2rem; min-height: 6rem; + @include border-shadow; border: solid gray 1px; - border-radius: 7px; - - &:focus-within { - border-color: mediumpurple; - outline: solid mediumpurple 2px; - } + @include post-editor; } .posts { diff --git a/client/src/ProfileCard.scss b/client/src/ProfileCard.scss index efa37cc..6098354 100644 --- a/client/src/ProfileCard.scss +++ b/client/src/ProfileCard.scss @@ -1,26 +1,30 @@ +@import "./common"; + .profileCard { width: 15rem; height: 5rem; display: flex; flex-direction: row; - border: 1px solid #EFEFEF; - border-radius: 7px; padding: 1rem; -flex: auto; + flex: auto; + + @include border-shadow; .profileInfo { display: flex; flex-direction: column; flex-grow: 1; + a { text-decoration: none; color: black; } - .fullName{ + .fullName { font-size: 1.3rem; } - .username{ + + .username { } } diff --git a/client/src/common.scss b/client/src/common.scss new file mode 100644 index 0000000..74c7798 --- /dev/null +++ b/client/src/common.scss @@ -0,0 +1,26 @@ +@mixin border-shadow { + border-radius: 7px; + border: 1px solid #E0E0E0; + box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.05), 2px 2px 0px 0px rgba(0, 0, 0, 0.025); +} + +@mixin post-editor { + background-color: #E0E0E0; + button { + background-color: #E0E0E0; + cursor: pointer; + margin: 0; + padding: 0.5rem; + color: black; + font-family: inherit; + } + textarea { + background-color: white; + font-family: inherit; + font-size: inherit; + } + &:focus-within { + border-color: mediumpurple; + outline: solid mediumpurple 2px; + } +} \ No newline at end of file