implemented helper classes for margins and text-align

src/helpers.scss

@@ -0,0 +1,156 @@
+.t-0 {
+    margin-top: 0 !important;
+}
+
+.t-0125 {
+    margin-top: 0.125rem !important;
+}
+
+.t-025 {
+    margin-top: 0.25rem !important;
+}
+
+.t-0375 {
+    margin-top: 0.375rem !important;
+}
+
+.t-05 {
+    margin-top: 0.5rem !important;
+}
+
+.t-0625 {
+    margin-top: 0.625rem !important;
+}
+
+.t-075 {
+    margin-top: 0.75rem !important;
+}
+
+.t-0875 {
+    margin-top: 0.875rem !important;
+}
+
+.t-1 {
+    margin-top: 1rem !important;
+}
+
+.t-1125 {
+    margin-top: 1.125rem !important;
+}
+
+.t-125 {
+    margin-top: 1.25rem !important;
+}
+
+.t-1375 {
+    margin-top: 1.375rem !important;
+}
+
+.t-15 {
+    margin-top: 1.5rem !important;
+}
+
+.t-1625 {
+    margin-top: 1.625rem !important;
+}
+
+.t-175 {
+    margin-top: 1.75rem !important;
+}
+
+.t-1875 {
+    margin-top: 1.875rem !important;
+}
+
+.t-2 {
+    margin-top: 2rem !important;
+}
+
+.b-0 {
+    margin-bottom: 0 !important;
+}
+
+.b-0125 {
+    margin-bottom: 0.125rem !important;
+}
+
+.b-025 {
+    margin-bottom: 0.25rem !important;
+}
+
+.b-0375 {
+    margin-bottom: 0.375rem !important;
+}
+
+.b-05 {
+    margin-bottom: 0.5rem !important;
+}
+
+.b-0625 {
+    margin-bottom: 0.625rem !important;
+}
+
+.b-075 {
+    margin-bottom: 0.75rem !important;
+}
+
+.b-0875 {
+    margin-bottom: 0.875rem !important;
+}
+
+.b-1 {
+    margin-bottom: 1rem !important;
+}
+
+.b-1125 {
+    margin-bottom: 1.125rem !important;
+}
+
+.b-125 {
+    margin-bottom: 1.25rem !important;
+}
+
+.b-1375 {
+    margin-bottom: 1.375rem !important;
+}
+
+.b-15 {
+    margin-bottom: 1.5rem !important;
+}
+
+.b-1625 {
+    margin-bottom: 1.625rem !important;
+}
+
+.b-175 {
+    margin-bottom: 1.75rem !important;
+}
+
+.b-1875 {
+    margin-bottom: 1.875rem !important;
+}
+
+.b-2 {
+    margin-bottom: 2rem !important;
+}
+
+.left {
+    text-align: left !important;
+}
+
+.center {
+    text-align: center !important;
+}
+
+.right {
+    text-align: right !important;
+}
+
+.row {
+    display: flex !important;
+}
+
+.column {
+    display: flex !important;
+    flex-direction: column !important;
+}

src/styles.scss

@@ -3,6 +3,7 @@
 /* Importing Bootstrap SCSS file. */
 // TODO: remove bootstrap styles
 @import "bootstrap/scss/bootstrap";
+@import url("./helpers.scss");
 
 :root {
     // COLORS to use but not official
@@ -287,192 +288,185 @@ input[type="checkbox"] {
     width: 1.25rem;
 }
 
-// Value Box
+// DETAILS PANEL
 
-.value-row {
-    display: flex;
-    justify-content: space-around;
-}
-
-.value-container {
-    width: 6rem;
-}
-
-.value-box {
-    width: 3.5rem;
-    height: 3rem;
-    font-size: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    border-radius: 10px;
-    background-color: white;
-    box-shadow: var(--shadow);
-}
-
-.value-input {
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        appearance: none;
-        margin: 0;
-    }
-}
-
-.value-label {
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}
-
-// details-panel
-
-.vertical-button-wrapper-3 {
-    width: 100%;
-    position: absolute;
-    bottom: 2rem;
-    display: grid;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr;
-    gap: 10px;
-    margin-top: 2rem;
-    align-items: center;
-    justify-content: center;
-}
-
-.vertical-button-wrapper-2 {
-    width: 100%;
-    position: absolute;
-    bottom: 2rem;
-    display: grid;
-    grid-template-rows: 1fr 1fr;
-    grid-template-columns: 1fr;
-    gap: 10px;
-    margin-top: 2rem;
-    align-items: center;
-    justify-content: center;
-}
-
-.button-wrapper-3-block {
-    display: grid;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-    margin-top: 2rem;
-    padding-bottom: 2rem;
-}
-
-.button-wrapper-2-block {
-    display: grid;
-    grid-template-rows: 1fr 1fr;
-    grid-template-columns: 1fr;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-    margin-top: 2rem;
-    padding-bottom: 2rem;
-}
-
-//
-
-.details-title {
-    text-align: center;
+.title {
     font-size: 2rem;
     font-weight: bold;
     margin-top: 1.5rem;
+    text-align: center;
 }
 
-.details-heading {
+.heading {
     font-size: 1.5rem;
-    font-weight: bold;
     margin-top: 1.5rem;
-}
-
-.details-subheading {
-    font-size: 1.25rem;
     font-weight: bold;
-    margin-top: 1.5rem;
+    text-align: center;
 }
 
-.details-content {
+.subheading {
+    font-size: 1.25rem;
     margin-top: 1.5rem;
-}
-
-.details-content-small {
-    margin-top: 0.5rem;
-}
-
-.details-bold {
-    font-weight: 500;
-}
-
-.centered {
+    font-weight: bold;
     text-align: center;
 }
 
-.details-value-container {
-    margin-top: 2rem;
-}
-
-.details-flex-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.top-1 {
-    margin-top: 1rem;
-}
-
-.top-2 {
-    margin-top: 2rem;
-}
-
-.top-3 {
-    margin-top: 3rem;
-}
-
-.details-value {
-    width: 3.5rem;
-    height: 3rem;
-    font-size: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    border-radius: 10px;
-    background-color: white;
-    box-shadow: var(--shadow);
-}
+.content {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+// .details-title {
+//     text-align: center;
+//     font-size: 2rem;
+//     font-weight: bold;
+//     margin-top: 1.5rem;
+// }
+
+// .details-content {
+//     margin-top: 1.5rem;
+//     margin-bottom: 1.5rem;
+// }
+
+// //
+
+// .details-heading {
+//     font-size: 1.5rem;
+//     font-weight: bold;
+//     margin-top: 1.5rem;
+// }
+
+// .details-subheading {
+//     font-size: 1.25rem;
+//     font-weight: bold;
+//     margin-top: 1.5rem;
+// }
+
+// .details-content-small {
+//     margin-top: 0.5rem;
+// }
+
+// .details-bold {
+//     font-weight: 500;
+// }
+
+// .centered {
+//     text-align: center;
+// }
+
+// .top-1 {
+//     margin-top: 1rem;
+// }
+
+// .top-2 {
+//     margin-top: 2rem;
+// }
+
+// .top-3 {
+//     margin-top: 3rem;
+// }
+
+// .details-value-container {
+//     margin-top: 2rem;
+// }
+
+// .details-flex-row {
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+// }
+
+// .details-value {
+//     width: 3.5rem;
+//     height: 3rem;
+//     font-size: 1.5rem;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     margin: auto;
+//     border-radius: 10px;
+//     background-color: white;
+//     box-shadow: var(--shadow);
+// }
+
+// .details-label {
+//     margin-top: 0.5rem;
+//     font-weight: 500;
+//     text-align: center;
+// }
+
+// .details-name {
+//     font-size: 1.5rem;
+//     font-weight: bold;
+//     margin-top: 1.5rem;
+//     text-align: center;
+// }
+
+// .details-long-description {
+//     margin: 2rem 1rem;
+//     font-size: 1rem;
+// }
 
-.details-label {
-    margin-top: 0.5rem;
-    font-weight: 500;
-    text-align: center;
-}
+// Drag and Drop Table
 
-.details-name {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-top: 1.5rem;
-    text-align: center;
+html,
+body {
+    height: 100%;
 }
-
-.details-long-description {
-    margin: 2rem 1rem;
-    font-size: 1rem;
+body {
+    margin: 0;
+    // font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-//
+// TO DELETE
+
+// .vertical-button-wrapper-3 {
+//     width: 100%;
+//     position: absolute;
+//     bottom: 2rem;
+//     display: grid;
+//     grid-template-rows: 1fr 1fr 1fr;
+//     grid-template-columns: 1fr;
+//     gap: 10px;
+//     margin-top: 2rem;
+//     align-items: center;
+//     justify-content: center;
+// }
+
+// .vertical-button-wrapper-2 {
+//     width: 100%;
+//     position: absolute;
+//     bottom: 2rem;
+//     display: grid;
+//     grid-template-rows: 1fr 1fr;
+//     grid-template-columns: 1fr;
+//     gap: 10px;
+//     margin-top: 2rem;
+//     align-items: center;
+//     justify-content: center;
+// }
+
+// .button-wrapper-3-block {
+//     display: grid;
+//     grid-template-rows: 1fr 1fr 1fr;
+//     grid-template-columns: 1fr;
+//     gap: 10px;
+//     align-items: center;
+//     justify-content: center;
+//     margin-top: 2rem;
+//     padding-bottom: 2rem;
+// }
+
+// .button-wrapper-2-block {
+//     display: grid;
+//     grid-template-rows: 1fr 1fr;
+//     grid-template-columns: 1fr;
+//     gap: 10px;
+//     align-items: center;
+//     justify-content: center;
+//     margin-top: 2rem;
+//     padding-bottom: 2rem;
+// }
 
 .flex-row {
     display: flex;
@@ -576,14 +570,3 @@ input[type="checkbox"] {
 .gap-20 {
     gap: 2rem;
 }
-
-// Drag and Drop Table
-
-html,
-body {
-    height: 100%;
-}
-body {
-    margin: 0;
-    // font-family: Roboto, "Helvetica Neue", sans-serif;
-}