prettier buttons

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;

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;
 

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 {

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 {
 
     }
   }

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;
+  }
+}