fix: tweaked button colors

jcw780 · Jul 15, 2020 · 6773846 · 6773846
1 parent a96a5d9
commit 6773846
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 25 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -140,4 +140,55 @@ i.question.circle.icon{
 
 .inputs > .target{
   grid-column: span 1;
+}
+
+/* Custom Colors */
+:root{
+  --blue-c1: #0071bc;
+  --blue-c2: #045da4;
+  --blue-c3: #07537d;
+  --blue-c3-t: rgba(7, 51, 125, 0.5);
+  --blue-c4: #205493;
+  --blue-c5: #5d8fe4;
+}
+
+
+/* Custom Button Coloring */
+.btn-custom-blue {
+  color: #fff!important;
+  background-color: var(--blue-c1)!important;
+  border-color: var(--blue-c1)!important;
+}
+
+.btn-custom-blue:hover {
+  color: #fff!important;
+  background-color: var(--blue-c2)!important;
+  border-color: var(--blue-c2)!important;
+}
+
+.btn-check:focus + .btn-custom-blue, .btn-custom-blue:focus, .btn-custom-blue.focus {
+  color: #fff!important;
+  background-color: var(--blue-c3)!important;
+  border-color: var(--blue-c3)!important;
+  box-shadow: 0 0 0 0.2rem var(--blue-c3-t)!important;
+}
+
+.btn-check:checked + .btn-custom-blue,
+.btn-check:active + .btn-custom-blue, .btn-custom-blue:active, .btn-custom-blue.active,
+.show > .btn-custom-blue.dropdown-toggle {
+  color: #fff!important;
+  background-color: var(--blue-c4)!important;
+  border-color: var(--blue-c3)!important;
+}
+
+.btn-check:checked + .btn-custom-blue:focus,
+.btn-check:active + .btn-custom-blue:focus, .btn-custom-blue:active:focus, .btn-custom-blue.active:focus,
+.show > .btn-custom-blue.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem var(--blue-c3-t)!important;
+}
+
+.btn-custom-blue:disabled, .btn-custom-blue.disabled {
+  color: #fff!important;
+  background-color: var(--blue-c5)!important;
+  border-color: var(--blue-c5)!important;
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -300,8 +300,8 @@ class App extends React.Component<{},{}> {
 	<hr/>
 	<Row className="justify-content-sm-center">
 		<Col sm="9">
-			<Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem"}}
-				variant="success" onClick={this.generate}>
+			<Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem", fontSize: "1.25rem"}}
+				variant="warning" onClick={this.generate}>
 				Make Graphs!
 			</Button>
 		</Col>

diff --git a/src/components/Charts/Charts.css b/src/components/Charts/Charts.css
@@ -2,7 +2,7 @@
     display: grid !important;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
     grid-gap: 0;
-    background-color: #6c757d;
+    background-color: var(--blue-c5);
     font-size: 1.25rem;
 }
 
@@ -25,4 +25,4 @@
 
 .graph-icon{
     opacity: 0;
-}
+}
diff --git a/src/components/Charts/Charts.tsx b/src/components/Charts/Charts.tsx
@@ -88,7 +88,7 @@ export class SingleChart extends React.Component<singleChartProps, singleChartSt
         const {props, state} = this, {config} = props;
         if(props.collapse){
             return(
-            <>
+            <div style={{paddingBottom: '.5rem'}}>
                 <Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem", height: "3rem"}}
                     onClick={this.toggleCollapse} 
                     ref={this.scrollRef} 
@@ -100,11 +100,11 @@ export class SingleChart extends React.Component<singleChartProps, singleChartSt
                     <Collapse in={state.open}>
                         {this.renderContent()}
                 </Collapse>
-            </> 
+            </div> 
             );
         }else{
             return(
-                <div ref={this.scrollRef}>
+                <div ref={this.scrollRef} style={{paddingBottom: '.5rem'}}>
                     {this.renderContent()}
                 </div>
             );
@@ -145,8 +145,7 @@ class SubGroup extends React.Component<subGroupProps, {index: number, locked: bo
                         key={i} 
                         value={i} 
                         type="radio"
-                        variant="secondary"
-                        className="carousel-button"
+                        className="carousel-button btn-custom-blue"
                         style={{height: '3rem'}}>
                         {config[singleChartIndex.name]}
                     </ToggleButton>
@@ -649,7 +648,7 @@ export class ChartGroup extends React.Component<chartGroupProps>{
     }
     render(){
         return(
-<>
+<div>
     <GeneralTooltip title="Impact Charts" content={
         <>
         <table id="tooltip-table">
@@ -700,7 +699,7 @@ export class ChartGroup extends React.Component<chartGroupProps>{
         </div>
     </GeneralTooltip>
     {this.addChart('post')}
-</>
+</div>
         );
     }
     //componentDidMount(){}

diff --git a/src/components/SettingsBar/SettingsBar.tsx b/src/components/SettingsBar/SettingsBar.tsx
@@ -16,13 +16,14 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
     private toggleCollapse = () => this.setState((current) => {return {open: !current.open}});
     render(){
         const {settings} = this.props, {open} = this.state;
+        const active = open === true ? 'active' : '';
         return(
         <>
             <Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem", height: "3rem"}}
                 onClick={this.toggleCollapse} ref={this.scrollRef}
                 aria-controls="collapseSettings"
                 aria-expanded={open} variant="dark"
-                className={open === true ? 'active' : ''}>
+                className={`${active} btn-custom-blue`}>
                 {this.titles[Number(!open)] + 'Settings'}
             </Button>
             <Collapse in={open}>

diff --git a/src/components/SettingsBar/SettingsRadio.tsx b/src/components/SettingsBar/SettingsRadio.tsx
@@ -25,7 +25,7 @@ export const SettingsRadio: React.FunctionComponent<settingsRadioProps> = React.
                 <ToggleButton key={i} value={i} 
                     onChange={onChangeInternal} 
                     type="radio" 
-                    variant="secondary"
+                    className="btn-custom-blue"
                 >
                     {option}
                 </ToggleButton>);

diff --git a/src/components/ShellForms/ShellForms.css b/src/components/ShellForms/ShellForms.css
@@ -3,7 +3,8 @@
 }
 
 .modal-header, .modal-body, .modal-footer{
-    padding: .5rem;
+    padding: 0rem;
+    padding-right: .5rem;
 }
 
 .footer-style{
@@ -20,7 +21,7 @@
     margin-bottom: .5rem;
     background-color: #f2f2f2;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
     grid-gap: .5rem;
     padding: 1rem;
 }
diff --git a/src/components/ShellForms/ShellForms.tsx b/src/components/ShellForms/ShellForms.tsx
@@ -268,9 +268,11 @@ export class ShellForms extends React.PureComponent<shellFormsProps> {
 		const {props} = this;
 		return(
 <Modal.Dialog>
-	<Modal.Header>
+	<Modal.Header style={{marginBottom: '.5rem'}}>
 		<Modal.Title style={{
-			marginLeft: "calc(50% - 50px)", marginRight: "auto", width: '100px', textAlign: 'center'
+			//marginLeft: "calc(50% - 50px)", 
+			backgroundColor: 'var(--blue-c4)', color: 'white',
+			marginRight: "auto", width: '100px', textAlign: 'center'
 		}}>Shell {props.index + 1}</Modal.Title>
 		<CloseButton onClick={this.deleteShip}/>
 	</Modal.Header>
@@ -329,11 +331,11 @@ export class ShellForms extends React.PureComponent<shellFormsProps> {
 						</Popover.Content>
 					</Popover>
 				}>
-				<Button className="footer-button" variant="dark">Raw Input</Button>
+				<Button className="footer-button" variant="warning">Raw Input</Button>
 			</OverlayTrigger>
 		</Col>
 		<Col className="footer-style">
-			<Button variant="dark" className="footer-button" 
+			<Button variant="warning" className="footer-button" 
 				onClick={this.copyShip} 
 			>Clone</Button>
 		</Col>

diff --git a/src/components/SupportFooter/SupportFooter.css b/src/components/SupportFooter/SupportFooter.css
@@ -2,7 +2,7 @@
     padding-top: 1rem;
     padding-bottom: 5rem;
     color: white;
-    background-color: #212529;
+    background-color: var(--blue-c3);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
@@ -14,7 +14,7 @@
 
   .support-link{
     color: white;
-    background-color: #212529;
+    background-color: var(--blue-c3);
     background-clip: content-box;
     padding-left: 25%;
     padding-right: 25%;
@@ -23,6 +23,6 @@
   }
 
   .support-link:hover{
-    color: black;
+    color: var(--blue-c3);
     background-color: white;
   }
diff --git a/src/components/TargetForms/TargetForms.tsx b/src/components/TargetForms/TargetForms.tsx
@@ -28,7 +28,9 @@ class RefAngleForm extends React.PureComponent<refAngleFormProps>{
                     style={{padding: 0, paddingTop: '0.25rem', paddingRight: '0.25rem', paddingLeft: '0.25rem'}}
                 >
                     <Modal.Title style={{
-                        marginLeft: 'calc(50% - 60px)', marginRight: 'auto', width: '120px', textAlign: 'center'
+                        //marginLeft: 'calc(50% - 60px)', 
+                        backgroundColor: 'var(--blue-c4)', color: 'white',
+                        marginRight: 'auto', width: '120px', textAlign: 'center'
                     }}>Label {props.index + 1}</Modal.Title>
                     <CloseButton onClick={this.deleteElement}/>
                 </Modal.Header>
@@ -69,7 +71,7 @@ class AngleForm extends React.PureComponent<angleFormProps>{
     private commonStyle = Object.freeze({
         formControl: {minWidth: '50%', maxWidth: '7rem', display: "inline-flex"},
         formGroup: {flexFlow: 'unset', padding: 0, marginBottom: '.5rem'},
-        formLabel: {backgroundColor: '#0f64f2', color: 'white', fontSize: '1.25rem', paddingTop: '.25rem', paddingBottom: '.25rem'}
+        formLabel: {backgroundColor: 'var(--blue-c4)', color: 'white', fontSize: '1.25rem', paddingTop: '.25rem', paddingBottom: '.25rem'}
     });
     render(){
         const {props} = this;

diff --git a/src/components/UtilityComponents/DownloadButton.tsx b/src/components/UtilityComponents/DownloadButton.tsx
@@ -14,7 +14,7 @@ export class DownloadButton extends React.Component<{updateData: Function, label
         const {state, props} = this;
         return (
 <a download={state.download} href={state.href}>
-    <Button variant="outline-secondary" onClick={this.click} style={props.style}>{props.label}</Button>
+    <Button variant="warning" onClick={this.click} style={props.style}>{props.label}</Button>
 </a>
         );
     }