Merge pull request #11 from oslabs-beta/nick

j-mccoll · web-flow · commit 79c1db9f4dcd · 2023-06-15T16:51:02.000-04:00
All fonts have min 16px, darkened red
diff --git a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
@@ -96,7 +96,7 @@ export default function ComponentMap({
     maxWidth: 300,
     backgroundColor: 'rgb(15,15,15)',
     color: 'white',
-    fontSize: '14px',
+    fontSize: '16px',
     lineHeight: '18px',
     fontFamily: 'Roboto',
     zIndex: 100,
diff --git a/src/app/components/StateRoute/ComponentMap/LinkControls.tsx b/src/app/components/StateRoute/ComponentMap/LinkControls.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes'
 // Font size of the Controls label and Dropdowns
 const controlStyles: ControlStyles = {
-  fontSize: '12px',
+  fontSize: '16px',
   padding: '10px',
 };
  
 const dropDownStyle: DropDownStyle = {
   margin: '0.5em',
-  fontSize: '12px',
+  fontSize: '16px',
   fontFamily: 'Roboto, sans-serif',
   borderRadius: '4px',
   borderStyle: 'solid',
diff --git a/src/app/styles/abstracts/_variables.scss b/src/app/styles/abstracts/_variables.scss
@@ -4,17 +4,18 @@
 $text-font-stack: 'Roboto', sans-serif !default;
 
 /// @type Color
-$fiery-rose: #ff6569;
+/// fiery-rose changed from ff6569 to F00008 globally to improve contrast
+$fiery-rose: #F00008;
 $blue-brand: #62d6fb;
 
 /// @type Color
 $blue-color-gradient: linear-gradient(145deg, #69e5ff, #58c1e2);
-$red-color-gradient: linear-gradient(145deg, #ff6569, #e65558);
+$red-color-gradient: linear-gradient(145deg, #f92f35, #f00008);
 $grey-color-gradient: linear-gradient(145deg, #5c6068, #4d5157);
 
 /// @type Color:
 $box-shadow-blue: inset 5px 5px 10px #53b6d5, inset -5px -5px 10px #71f6ff;
-$box-shadow-red: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
+$box-shadow-red: inset 5px 5px 10px #ff0004, inset -5px -5px 10px #f9393f;
 
 /// @type Color
 $text-color: #e7e7e7;
@@ -58,4 +59,4 @@ $background-rc-color: #e9e9e9 !default;
 $highlight-color: rgba(224, 224, 224, 0.5) !default;
 
 /// @type Font Size
-$button-text-size: 12px;
+$button-text-size: 16px;
diff --git a/src/app/styles/base/_typography.scss b/src/app/styles/base/_typography.scss
@@ -1,4 +1,4 @@
 body {
 	color: $text-color;
-	font: normal 13px $text-font-stack;
+	font: normal 16px $text-font-stack;
 }
diff --git a/src/app/styles/components/_actionComponent.scss b/src/app/styles/components/_actionComponent.scss
@@ -20,6 +20,7 @@
 }
 
 .action-component.selected {
+  font-size: 16px;
   background-color: $light-grey-one;
 }
 
diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss
@@ -4,6 +4,7 @@
   padding: 3px;
   outline: transparent;
   color: white;
+  font-size: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -37,7 +38,7 @@
   border-radius: 3px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 14px 'Roboto', sans-serif;
+  font: 300 16px 'Roboto', sans-serif;
   font-size: $button-text-size;
   width: 120px;
   background: $red-color-gradient;
@@ -95,7 +96,7 @@
   border-radius: 3px;
   background: $grey-color-gradient;
   font: normal 16px 'Roboto', sans-serif;
-  color: #b0b0b0;
+  color: #FFFFFF;
 }
 
 .jump-button {
@@ -105,7 +106,7 @@
   width: 70px;
   border: transparent;
   border-radius: 3px;
-  background-color: #565a61;
+  background-color: #232529;
   font: normal 16px 'Roboto', sans-serif;
   color: #FFFFFF;
   transform: rotateX(90deg);
@@ -127,7 +128,7 @@
   width: 70px;
   border: transparent;
   border-radius: 3px;
-  font: normal 11px 'Roboto', sans-serif;
+  font: normal 16px 'Roboto', sans-serif;
 }
 
 .empty-button:hover {
@@ -192,6 +193,7 @@
 .export-button,
 .pause-button {
   @extend %button-shared;
+  font-size: 16px;
   color: white;
   border-color: transparent;
   background: $blue-color-gradient;
@@ -225,7 +227,7 @@
   align-items: center;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 14px 'Roboto', sans-serif;
+  font: 300 16px 'Roboto', sans-serif;
   font-size: $button-text-size;
 
   background: $brand-color;
diff --git a/src/app/styles/components/_performanceVisx.scss b/src/app/styles/components/_performanceVisx.scss
@@ -10,7 +10,7 @@
 }
 
 .MuiSwitch-switchBase {
-  color: #ff6569 !important;
+  color: #F00008 !important;
 }
 
 .MuiSwitch-track {
@@ -24,7 +24,7 @@
 #routes-formcontrol {
   padding: 3px;
   margin-left: 50px;
-  font: 400 14px 'Roboto', sans-serif;
+  font: 400 16px 'Roboto', sans-serif;
   text-align: left;
   // min-width: 10em;
   // max-height: 50%;
@@ -33,19 +33,19 @@
 #routes-dropdown {
   color: white !important;
   // background-color: #ff6569 !important;
-  font: 400 14px 'Roboto', sans-serif;
+  font: 400 16px 'Roboto', sans-serif;
   text-align: left;
 }
 
 .saveSeriesContainer {
   #routes-select, #snapshot-select {
-    background-color: #ff6569 !important;
+    background-color: #F00008 !important;
   }
 }
 
 #routes-select, #snapshot-select{
   color: white !important;
-  font: 400 14px 'Roboto', sans-serif;
+  font: 400 16px 'Roboto', sans-serif;
   text-align: left;
   width: 120px;
   height: 30px;
diff --git a/src/app/styles/components/_rc-slider.scss b/src/app/styles/components/_rc-slider.scss
@@ -52,7 +52,7 @@
 	border-color: $border-slider;
 }
 .rc-slider-handle:active {
-	background: #e4494b;
+	background: #f00004;
 	border-color: $border-slider;
 	cursor: -webkit-grabbing;
 	cursor: grabbing;
@@ -62,7 +62,7 @@
 	top: 18px;
 	left: 0;
 	width: 100%;
-	font-size: 12px;
+	font-size: 16px;
 }
 .rc-slider-mark-text {
 	position: absolute;
@@ -226,7 +226,7 @@
 	padding: 6px 2px;
 	min-width: 24px;
 	height: 24px;
-	font-size: 12px;
+	font-size: 16px;
 	line-height: 1;
 	color: #fff;
 	text-align: center;
diff --git a/src/app/styles/components/_renderingFrequency.scss b/src/app/styles/components/_renderingFrequency.scss
@@ -44,7 +44,7 @@
 		margin-bottom: 5px;
 		margin-top: 5px;
 		text-transform: uppercase;
-		font-size: 14px;
+		font-size: 16px;
 		font-weight: 500;
 	}
 
@@ -79,7 +79,7 @@
 		margin-bottom: 5px;
 		margin-top: 5px;
 		text-transform: uppercase;
-		font-size: 14px;
+		font-size: 16px;
 		font-weight: 500;
 	}
 
diff --git a/src/app/styles/components/_sliderHandle.scss b/src/app/styles/components/_sliderHandle.scss
@@ -54,7 +54,7 @@
 	z-index: 1070;
 	display: block;
 	visibility: visible;
-	font-size: 12px;
+	font-size: 16px;
 	line-height: 1.5;
 	opacity: 0.9;
 }
diff --git a/src/app/styles/components/diff.css b/src/app/styles/components/diff.css
@@ -1,14 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 .jsondiffpatch-delta {
   font-family: 'Roboto', sans-serif;
-  font-size: 12px;
+  font-size: 16px;
   margin: 0;
   padding: 0 0 0 12px;
   display: inline-block;
 }
 .jsondiffpatch-delta pre {
   font-family: 'Roboto', sans-serif;
-  font-size: 12px;
+  font-size: 16px;
   margin: 0;
   padding: 0;
   display: inline-block;
diff --git a/src/app/styles/layout/_actionContainer.scss b/src/app/styles/layout/_actionContainer.scss
@@ -7,7 +7,7 @@
 
 .actionname {
   background-color: inherit;
-  color: #fffeff;
+  color: #ffffff;
 }
 
 #recordBtn{
diff --git a/src/app/styles/layout/_buttonsContainer.scss b/src/app/styles/layout/_buttonsContainer.scss
@@ -62,7 +62,7 @@
 	color: #d72828;
 	border: 1px solid;
 	margin-top: 2px;
-    font-size: 12px;
+    font-size: 16px;
 	outline: none;
 }
 
diff --git a/src/app/styles/layout/_travelContainer.scss b/src/app/styles/layout/_travelContainer.scss
@@ -25,7 +25,7 @@
 
 
 .react-select-container {
-	font-size: 12px;
+	font-size: 16px;
 	min-width: 90px;
 	margin: 8px;
 	.react-select__control {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`body {`
`2`	`2`	`color: $text-color;`
`3`		`- font: normal 13px $text-font-stack;`
	`3`	`+ font: normal 16px $text-font-stack;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.action-component.selected {`
	`23`	`+ font-size: 16px;`
`23`	`24`	`background-color: $light-grey-one;`
`24`	`25`	`}`
`25`	`26`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`	`z-index: 1070;`
`55`	`55`	`display: block;`
`56`	`56`	`visibility: visible;`
`57`		`- font-size: 12px;`
	`57`	`+ font-size: 16px;`
`58`	`58`	`line-height: 1.5;`
`59`	`59`	`opacity: 0.9;`
`60`	`60`	`}`