Refactored css and added css variables

Real-Dev-Squad · Sep 28, 2024 · 65199ab · 65199ab
1 parent 343850f
commit 65199ab
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 40 deletions.
diff --git a/profile-diff-details/constants.js b/profile-diff-details/constants.js
@@ -1,6 +1,6 @@
 const YEARS_OF_EXPERIENCE = 'yoe';
 
-const fieldDisplayName = {
+const fieldDisplayName = Object.freeze({
   first_name: 'First name',
   last_name: 'Last name',
   designation: 'Role',
@@ -13,10 +13,10 @@ const fieldDisplayName = {
   twitter_id: 'Twitter',
   instagram_id: 'Instagram',
   website: 'Website',
-};
+});
 
-const Status = {
+const Status = Object.freeze({
   APPROVED: 'APPROVED',
   PENDING: 'PENDING',
   NOT_APPROVED: 'NOT APPROVED',
-};
+});
diff --git a/profile-diff-details/style.css b/profile-diff-details/style.css
@@ -31,6 +31,7 @@
   --color-red: #ae1820;
   --color-green: rgba(0, 128, 0, 0.8);
   --color-warn: rgba(199, 129, 18, 0.8);
+  --font-family: 'Inter', sans-serif;
 }
 
 *,
@@ -40,7 +41,7 @@
 }
 
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--font-family);
   margin: 0;
   padding: 0;
   display: flex;
@@ -58,7 +59,6 @@ body {
   align-items: center;
   justify-content: center;
   text-align: center;
-  font-family: 'Inter', sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
@@ -89,7 +89,6 @@ body {
   flex-direction: column;
   align-items: center;
   gap: 1em;
-  font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: x-large;
   text-align: center;
@@ -102,7 +101,6 @@ body {
 }
 
 .user_name {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 20px;
@@ -118,7 +116,6 @@ body {
   justify-content: end;
   align-items: center;
   color: #233876;
-  font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 14px;
 }
@@ -133,7 +130,6 @@ body {
 }
 
 .reason_heading {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 17px;
@@ -146,7 +142,6 @@ body {
 }
 
 .reason_textarea {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-size: 16px;
   background: #ffffff;
@@ -171,7 +166,6 @@ body {
   background: #046c4e;
   border-radius: 10px;
   border: none;
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
@@ -189,7 +183,6 @@ body {
   background: #c81e1e;
   border-radius: 10px;
   border: none;
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
@@ -257,7 +250,6 @@ body {
 }
 
 .profile-details-name {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -269,7 +261,6 @@ body {
 }
 
 .profile-details-old-data {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -281,7 +272,6 @@ body {
 }
 
 .profile-details-new-data {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -293,7 +283,6 @@ body {
 }
 
 .profile-details-data {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;

diff --git a/profile-diffs/constants.js b/profile-diffs/constants.js
@@ -7,13 +7,13 @@ const NEWEST_FIRST = 'Newest first';
 const SEARCH_ELEMENT = 'assignee-search';
 const LAST_ELEMENT_CONTAINER = '.virtual';
 
-const Status = {
+const Status = Object.freeze({
   APPROVED: 'APPROVED',
   PENDING: 'PENDING',
   NOT_APPROVED: 'NOT APPROVED',
-};
+});
 
-const Order = {
+const Order = Object.freeze({
   DESCENDING: 'desc',
   ASCENDING: 'asc',
-};
+});
diff --git a/profile-diffs/style.css b/profile-diffs/style.css
@@ -31,6 +31,7 @@
   --color-red: #ae1820;
   --color-green: rgba(0, 128, 0, 0.8);
   --color-warn: rgba(199, 129, 18, 0.8);
+  --font-family: 'Inter', sans-serif;
 }
 
 *,
@@ -39,34 +40,33 @@
   box-sizing: border-box;
 }
 
+body {
+  font-family: var(--font-family);
+  font-style: normal;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  user-select: none;
+  max-width: 100vw;
+  background-color: #f8fafd;
+}
+
 .header {
   height: 7.25em;
   background-color: #233876;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  font-family: 'Inter', sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
   font-size: 20px;
   color: var(--white);
 }
 
-body {
-  font-family: 'Inter', sans-serif;
-  font-style: normal;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  user-select: none;
-  max-width: 100vw;
-  background-color: #f8fafd;
-}
-
 .search-filter {
   display: flex;
   flex-direction: column;
@@ -91,7 +91,6 @@ body {
   padding: 0.7rem 2.7rem 0.7rem 3.243rem;
   border: 1px solid #fff;
   box-shadow: 2px 1px 5px 0px #d4cccc40;
-  font-family: 'Inter', sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
@@ -141,7 +140,6 @@ body {
 .filter-button {
   background-color: transparent;
   color: #90959f;
-  font-family: 'Inter', sans-serif;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
@@ -192,7 +190,6 @@ body {
 }
 
 .profile-card_right-date-time {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 13px;
@@ -219,7 +216,6 @@ body {
 }
 
 .profile-name {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 16px;
@@ -228,7 +224,6 @@ body {
 }
 
 .profile-username {
-  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 13px;