Adds backup functionality

src/styles/color-palette.scss

@@ -5,6 +5,16 @@
   --background: #0b1021; // Page background
   --background-darker: #05070e; // Used for navigation bar, footer and fills
 
+  /* Action Colors */
+  --info: #04e4f4;
+  --success: #20e253;
+  --warning: #f6f000;
+  --danger: #f80363;
+  --neutral: #272f4d;
+
+  --white: #fff;
+  --black: #000;
+
   /* Modified Colors */
   --item-group-background: #0b1021cc;
   --medium-grey: #5e6474;
@@ -16,6 +26,11 @@
   --transparent-50: #00000080;
   --transparent-30: #0000004d;
 
+  /* Semi-Transparent White*/
+  --transparent-white-70: #ffffffb3;
+  --transparent-white-50: #ffffff80;
+  --transparent-white-30: #ffffff4d;
+
   /* Other Variables */
   --outline-color: none;
   --curve-factor: 5px; // Border radius for most components

src/styles/global-styles.scss

@@ -20,6 +20,14 @@ h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
 
+.bold { font-weight: bold; }
+.light { font-weight: lighter; }
+.text-left { text-align: left;}
+.text-right { text-align: right;}
+.text-center { text-align: center;}
+.horizontal-center { margin: 0 auto; }
+.border-box { box-sizing: border-box; }
+
 /* Overiding styles for the global toast component */
 .toast-message {
     background: var(--toast-background) !important;
@@ -29,4 +37,15 @@ h1, h2, h3, h4, h5 {
     font-size: 1.25rem !important;
 }
 
+.toast-error {
+    background: var(--danger) !important;
+    color: var(--white) !important;
+    font-size: 1.25rem !important;
+}
+.toast-success {
+    background: var(--success) !important;
+    color: var(--white) !important;
+    font-size: 1.25rem !important;
+}
+