#131 - Replace 'theme' variables with other variables

salabs · Mar 4, 2021 · 8d47554 · 8d47554
1 parent 2415d40
commit 8d47554
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 10 deletions.
diff --git a/frontend/src/App.styles.js b/frontend/src/App.styles.js
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import theme from './styles/theme';
 
 export const StyledApp = styled.div`
     display: flex;
@@ -17,6 +16,7 @@ export const StyledApp = styled.div`
     }
     select:focus,
     input:focus {
-        outline: 1px solid ${theme.testTheme.linkColor};
+        outline: 0;
+        box-shadow: 0 0 0 4px var(--sparkling-blue);
     }
 `;
diff --git a/frontend/src/components/BranchFilter.js b/frontend/src/components/BranchFilter.js
@@ -4,7 +4,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useStateValue } from '../contexts/state';
-import theme from '../styles/theme';
 import styled from 'styled-components';
 
 const Container = styled.div`
@@ -50,7 +49,7 @@ const SuggestionError = styled.div`
     padding-top: 5px;
     position: absolute;
     font-size: 75%;
-    color: ${theme.colors.fail};
+    color: var(--semolina-red);
     display: none;
     font-weight: bold;
     &.show {

diff --git a/frontend/src/components/TestIcon.js b/frontend/src/components/TestIcon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import FA from 'react-fontawesome';
-import theme from '../styles/theme';
+import { colorTypes } from '../utils/colorTypes';
 import styled from 'styled-components';
 import { ReactComponent as Pass } from '../images/success.svg';
 import { ReactComponent as Fail } from '../images/fail.svg';
@@ -62,7 +62,7 @@ export const pickIcon = (test_status, key) => {
                     key={key}
                     text="Time"
                     type="clock-o"
-                    iconColor={theme.colors.skipped}
+                    iconColor={colorTypes['tonic grey']}
                 />
             );
             break;

diff --git a/frontend/src/components/team/SelectedTeam.jsx b/frontend/src/components/team/SelectedTeam.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import NotFound from '../NotFound';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useStateValue } from '../../contexts/state';
-import theme from '../../styles/theme';
 import BreadcrumbNav from '../BreadcrumbNav';
 import { pickIcon } from '../TestIcon';
 import { useTranslation } from 'react-i18next';
@@ -98,7 +97,7 @@ const SelectedTeam = ({ selectedTeam }) => {
         .series_count;
 
     return (
-        <div id="selectedTeam" css={theme.loadingState}>
+        <div id="selectedTeam">
             <BreadcrumbNav status={'team'} />
             {selectedTeam && selectedTeam.all_builds ? (
                 <SelectedTeamContainer>

diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router';
 import { useStateValue } from '../contexts/state';
-import theme from '../styles/theme';
 import BreadcrumbNav from '../components/BreadcrumbNav';
 import Notfound from '../components/NotFound';
 import ParentBuild from '../components/parentData/ParentBuild';
@@ -71,7 +70,6 @@ const Suite = () => {
         <div id="suite">
             {!selectedSuiteState || loadingState ? (
                 <div
-                    css={theme.loadingState}
                     role="status"
                     aria-live="polite"
                     aria-label="Loading"