Added initial components.

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -352,6 +352,13 @@ code {
 }
 
 /* Input */
+.j-input-prefix {
+    display: flex;
+    align-items: center;
+    padding: .5em;
+    background-color: rgb(57, 79, 94); /* TODO: Move this out */
+}
+
 .j-input {
     background: rgb(0,20,34);
     border: 1px solid #304562;
@@ -545,7 +552,7 @@ code {
 }
 
 .j-product-indicator {
-    border-width: 1px;
+    border-width: 2px;
     border-style: solid;
     border-image: none;
     padding: 0.5rem;
@@ -553,6 +560,15 @@ code {
     border-color: var(--product-title-text-color);
 }
 
+.j-product-indicator-invalid {
+    border-color: #ffe073;
+    background: #272727;
+}
+
+.j-product-indicator-invalid > .j-icon {
+    background-color: #ffe073;
+}
+
 .j-product-indicator-favorite {
     border-color: #f04885;
     background: #f048852b;
@@ -610,6 +626,10 @@ code {
     mask-image: url("../svg/star-fill.svg");
 }
 
+.j-icon-star-fill {
+    mask-image: url("../svg/star-fill.svg");
+}
+
 .j-icon-bag {
     mask-image: url("../svg/bag.svg");
 }
@@ -638,6 +658,14 @@ code {
     mask-image: url("../svg/warning-fill.svg");
 }
 
+.j-icon-globe {
+    mask-image: url("../svg/globe.svg");
+}
+
+.j-icon-translate {
+    mask-image: url("../svg/translate.svg");
+}
+
 .j-icon-2 {
     background-repeat: no-repeat;
     background-position: center;
@@ -660,4 +688,67 @@ code {
 
 .j-icon-2-flag-kr {
     background-image: url("../svg/flag-kr.svg");
+}
+
+/* Border Colors */
+.border-color-black {
+    border-color: var(--color-black);
+}
+
+.border-color-yellow {
+    border-color: var(--color-yellow);
+}
+
+.border-color-green {
+    border-color: var(--color-green);
+}
+
+.border-color-teal {
+    border-color: var(--color-teal);
+}
+
+.border-color-blue {
+    border-color: var(--color-blue);
+}
+
+.border-color-orange {
+    border-color: var(--color-orange);
+}
+
+.border-color-pink {
+    border-color: var(--color-pink);
+}
+
+/* Background Colors */
+.background-color-black {
+    background-color: var(--color-black);
+}
+
+.background-color-yellow {
+    background-color: var(--color-yellow);
+}
+
+.background-color-green {
+    background-color: var(--color-green);
+}
+
+.background-color-teal {
+    background-color: var(--color-teal);
+}
+
+.background-color-blue {
+    background-color: var(--color-blue);
+}
+
+.background-color-orange {
+    background-color: var(--color-orange);
+}
+
+.background-color-pink {
+    background-color: var(--color-pink);
+}
+
+/* Background Gradients */
+.background-gradient-pink {
+    background-image: linear-gradient(45deg, var(--color-dark-pink), var(--color-pink))
 }

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -39,6 +39,22 @@
     --input-background-color: rgb(0,20,34);
     --input-focus-border-color: #64b5f6;
     --input-focus-box-shadow: 0 0 0 1px #93cbf9;
+    /* Colors */
+    --color-primary: rgb(180,200, 214);
+    --color-secondary: rgb(200,220,234);
+    --color-black: #272727;
+    --color-yellow: #ffe073;
+    --color-green: #afe07d;
+    --color-teal: #6eecff;
+    --color-blue: #73c4ff;
+    --color-orange: #ffa773;
+    --color-pink: #e06894;
+    --color-dark-pink: #832044;
+    /* Background Colors */
+    --background-color-primary: rgb(57, 79, 94);
+    --background-color-secondary: rgb(30, 53, 69);
+
+    /* Official */
 }
 
 /*