use rem instead of px

lyft · Nov 19, 2020 · b2fdd69 · b2fdd69
1 parent 3d9bf5e
commit b2fdd69
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/frontend/packages/core/src/AppLayout/header.tsx b/frontend/packages/core/src/AppLayout/header.tsx
@@ -22,10 +22,9 @@ const MenuButton = styled(IconButton)`
 `;
 
 const Title = styled(Typography)`
-  margin-right: 25px;
+  margin-right: 1.6rem;
   font-weight: bold;
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 1.25rem;
   color: #ffffff;
   opacity: 0.87;
 `;

diff --git a/frontend/packages/core/src/AppLayout/logo.tsx b/frontend/packages/core/src/AppLayout/logo.tsx
@@ -11,9 +11,9 @@ const rotate = keyframes`
 `;
 
 const StyledSvg = styled.svg`
-  height: 32px;
-  width: 32px;
-  margin-right: 16px;
+  height: 2rem;
+  width: 2rem;
+  margin-right: 1rem;
   &:hover {
     animation: ${rotate} 5s linear;
   }

diff --git a/frontend/packages/core/src/AppLayout/notifcations.tsx b/frontend/packages/core/src/AppLayout/notifcations.tsx
@@ -6,6 +6,7 @@ import NotificationsIcon from "@material-ui/icons/Notifications";
 const StyledNotificationsIcon = styled(Icon)`
   color: #ffffff;
   opacity: 0.87;
+  margin-right: 1rem;
 `;
 
 const Notifications: React.FC = () => {
@@ -16,4 +17,4 @@ const Notifications: React.FC = () => {
   );
 };
 
-export default Notifications;
+export default Notifications;
diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx
@@ -15,14 +15,14 @@ import Cookies from "js-cookie";
 import jwtDecode from "jwt-decode";
 
 const UserPhoto = styled(IconButton)`
-  padding: 1px 0 4px 12px;
-  margin-right: 4px;
+  padding: 0.06rem 0rem 0.25rem 0.75rem;
+  margin-right: 0.25rem;
 `;
 
 const Avatar = styled(MuiAvatar)`
   background-color: #d7dadb;
-  height: 32px;
-  width: 32px;
+  height: 2rem;
+  width: 2rem;
 `;
 
 const Initials = styled(Typography)`