Progress

app/javascript/styles/global.css

@@ -9,6 +9,13 @@ body {
   overscroll-behavior-y: none;
 }
 
+.statusContent * {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 15px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+}
+
 .default {
   display: flex;
   flex-basis: auto;
@@ -49,7 +56,7 @@ body {
   white-space: inherit;
 }
 
-.flex-normal {
+.flexNormal {
   flex-basis: 0%;
   flex-grow: 1;
   flex-shrink: 1;
@@ -80,13 +87,23 @@ body {
   white-space: nowrap;
 }
 
+.whiteSpaceNoWrap { white-space: nowrap; }
+
+.outlineNone { outline: none; }
+.resizeNone { resize: none; }
+
 .circle { border-radius: 9999px; }
 .radiusSmall { border-radius: 4px; }
 
-.borderColorSubtle { border-color: #e4e4e4; }
+.borderColorSubtle { border-color: #ECECED; }
+.borderColorWhite { border-color: #fff; }
+.borderColorBrand { border-color: #21cf7a; }
 .borderRight1PX { border-right-width: 1px; }
 .borderBottom1PX { border-bottom-width: 1px; }
 .borderLeft1PX { border-left-width: 1px; }
+.borderTop1PX { border-top-width: 1px; }
+.border1PX { border-width: 1px; }
+.border2PX { border-width: 2px; }
 
 .marginAuto { margin: auto; }
 
@@ -101,8 +118,11 @@ body {
 .pointerEventsAuto > * { pointer-events: auto;}
 .pointerEventsNone { pointer-events: none !important; }
 
+.backgroundTransparent { background-color: transparent; }
 .backgroundPanel { background-color: #aaa; }
 .backgroundSubtle { background-color: #F5F8FA; }
+.backgroundSubtle2 { background-color: #e8ecef; }
+.backgroundColorSubtle3 { background-color: #F6F6F9; }
 .backgroundWhite { background-color: #fff; }
 .backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); }
 .backgroundColorBrandLight { background-color: #36e991; }
@@ -114,16 +134,19 @@ body {
 .colorBrand { color: #21cf7a }
 .fillColorBlack { fill: #000; }
 .fillColorBrand { fill: #21cf7a; }
+.fillColorSubtle { fill: #666; }
 
 .bottom0 { bottom: 0; }
 .left0 { left: 0px; }
 .right0 { right: 0px; }
 .top0 { top: 0px; }
 
-.lineHeight125 { height: 1.25em; }
+.lineHeight125 { line-height: 1.25em; }
+.lineHeight15 { line-height: 1.5em; }
 .lineHeight2 { line-height: 2em; }
 
 .positionFixed { position: fixed; }
+.positionSticky { position: sticky; }
 .positionRelative { position: relative; }
 .positionAbsolute { position: absolute; }
 
@@ -131,12 +154,14 @@ body {
 
 .height100VH { height: 100vh; }
 .height100PC { height: 100%; }
-.height50PX { height: 50px; }
-.height72PX { height: 72px; }
 .height22PX { height: 22px; }
+.height50PX { height: 50px; }
+.height53PX { height: 53px; }
+.height72PX { height: 72px; }
+.height122PX { height: 122px; }
 
 .width1015PX { width: 1015px; }
-.width660PX { width: 660px; }
+.width670PX { width: 670px; }
 .width325PX { width: 325px; }
 .width250PX { width: 250px; }
 .width100PC { width: 100%; }
@@ -149,35 +174,48 @@ body {
 .textAlignCenter { text-align: center; }
 
 .fontSize19PX { font-size: 19px; }
+.fontSize16PX { font-size: 16px; }
 .fontSize15PX { font-size: 15px; }
+.fontSize14PX { font-size: 14px; }
 .fontSize13PX { font-size: 13px; }
+.fontSize12PX { font-size: 12px; }
 
 .fontWeightNormal { font-weight: 400; }
+.fontWeight500 { font-weight: 500; }
 .fontWeightBold { font-weight: 600; }
 .fontWeightExtraBold { font-weight: 800; }
 
 .noUnderline { text-decoration: none; }
 .underline { text-decoration: underline; }
 
+.objectFitCover { object-fit: cover; }
+
 .z1 { z-index: 1; }
 .z2 { z-index: 2; }
 .z3 { z-index: 3; }
 
-.marginRight10PX { margin-right: 10px; }
-
 .marginVertical5PX {
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
+.marginLeft5PX { margin-left: 5px; }
+.marginRight2PX { margin-right: 2px; }
+
 .marginVertical10PX {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.marginRight10PX { margin-right: 10px; }
+.marginLeft15PX { margin-left: 15px; }
+.marginLeftAuto { margin-left: auto; }
+.marginRightAuto { margin-right: auto; }
 .marginBottom15PX { margin-bottom: 15px; }
+.marginBottom10PX { margin-bottom: 10px; }
 .marginTop10PX { margin-top: 10px; }
 .marginTop5PX { margin-top: 5px; }
+.marginTopNeg30PX { margin-top: -30px; }
 
 .paddingHorizontal15PX {
   padding-left: 15px;
@@ -185,6 +223,11 @@ body {
 }
 .paddingRight15PX { padding-right: 15px; }
 
+.paddingVertical5PX {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
 .paddingVertical10PX {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -195,7 +238,12 @@ body {
   padding-bottom: 15px;
 }
 
-.paddingHoizontal10PX {
+.paddingVertical2PX {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.paddingHorizontal10PX {
   padding-left: 10px;
   padding-right: 10px;
 }