Skip to content
Snippets Groups Projects
Commit d0cf83ec authored by CREY Romain's avatar CREY Romain
Browse files

WIP: sonarqube + clean CSS

parent 3c9b4dfd
Branches
Tags
3 merge requests!103Support,!102Dev,!73Fix/feedback + sonarqube + CSS + unused components
Showing
with 96 additions and 212 deletions
......@@ -56,7 +56,7 @@ const PrimaryButton = withStyles({
const SecondaryButton = withStyles({
root: {
border: '1px solid #121212',
border: '1px solid var(--darkLight2)',
},
label: {
color: '#E0E0E0',
......
......@@ -56,7 +56,7 @@ const PrimaryButton = withStyles({
const SecondaryButton = withStyles({
root: {
border: '1px solid #121212',
border: '1px solid var(--darkLight2)',
},
label: {
fontWeight: 'normal',
......
......@@ -46,7 +46,7 @@ const PrimaryButton = withStyles({
const SecondaryButton = withStyles({
root: {
border: '1px solid #121212',
border: '1px solid var(--darkLight2)',
},
label: {
color: '#E0E0E0',
......
......@@ -8,7 +8,7 @@ import { FluidType } from 'enum/fluid.enum'
const CardBase = withStyles({
root: {
background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
background: 'var(--darkLinearCard)',
boxSizing: 'border-box',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
borderRadius: '4px',
......
......@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles'
const CardBase = withStyles({
root: {
background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
background: 'var(--darkLinearCard)',
border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
......
......@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles'
const CardBase = withStyles({
root: {
background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
background: 'var(--darkLinearCard)',
border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
......
......@@ -11,7 +11,7 @@ import Grid from '@material-ui/core/Grid'
const CardBase = withStyles({
root: {
background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
background: 'var(--darkLinearCard)',
border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px',
......
......@@ -23,7 +23,7 @@ const BaseExpansionPanel = withStyles({
const StyledExpansionPanel = withStyles({
root: {
background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
background: 'var(--darkLinearCard)',
},
expanded: {
background: 'var(--greyBright)',
......
......@@ -19,7 +19,7 @@ const IconButtonBase = withStyles({
const SelectedIconButtonBase = withStyles({
root: {
border: '1px solid var(--multiColor)',
background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
background: 'var(--darkLinearCard)',
boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.55)',
},
})(IconButtonBase)
......
......@@ -77,10 +77,10 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
}
const getMaxLoad = () => {
if (
(timeStep === TimeStep.DAY && !showCompare) ||
timeStep === TimeStep.HALF_AN_HOUR
) {
const maxCompare = chartData.comparisonData
? Math.max(...chartData.comparisonData.map(d => d.value))
: 0
if (timeStep === TimeStep.DAY || timeStep === TimeStep.HALF_AN_HOUR) {
const actualMonth = selectedDate.startOf('week').month
const actualYear = selectedDate.startOf('week').year
const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes
......@@ -89,15 +89,14 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
if (DateTime.local() < selectedDate && !maxLoads[key]) {
maxLoads[key] = 15
}
if (showCompare) {
return Math.max(maxLoads[key], maxCompare)
}
return maxLoads[key] > 0 ? maxLoads[key] : 15
} else {
let max = chartData.actualData
? Math.max(...chartData.actualData.map(d => d.value))
: 0
const maxCompare = chartData.comparisonData
? Math.max(...chartData.comparisonData.map(d => d.value))
: 0
max = max <= 0 ? 15 : max
return showCompare ? Math.max(max, maxCompare) : max
}
......
......@@ -82,6 +82,9 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
const actualMonth = lastSlideDate.startOf('week').month
const actualYear = lastSlideDate.startOf('week').year
// From the first monday of the month to the first monday of the next month for for TimeStep.DAY
// Full month + last day of the previous month for TimeStep.HALF_AN_HOUR
const maxTimePeriod = {
startDate:
timeStep === TimeStep.HALF_AN_HOUR
......
......@@ -10,6 +10,7 @@ import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
import { Account, Trigger } from 'doctypes'
import { TriggerService } from 'services/triggersService'
import { AccountService } from 'services/accountService'
import warningWhite from 'assets/icons/ico/warning-white.svg'
import { isKonnectorRunning } from 'cozy-harvest-lib/dist/helpers/triggers'
import {
......@@ -18,6 +19,7 @@ import {
LOGIN_SUCCESS_EVENT,
SUCCESS_EVENT,
} from 'cozy-harvest-lib/dist/models/KonnectorJob'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface KonnectorResultProps {
account: Account
......@@ -116,17 +118,26 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
return (
<div className="accordion-update-result">
<div className="accordion-update">
<div
className={
status === 'errored'
? 'accordion-caption-red text-16-normal'
: 'accordion-caption text-16-normal'
}
>
{t('KONNECTORCONFIG.LABEL_UPDATEDAT')}
<div
className={
status === 'errored' ? 'accordion-update-errored' : 'accordion-update'
}
>
{status === 'errored' && (
<div className="warning-white">
<StyledIcon
icon={warningWhite}
size={36}
className="warning-icon"
/>
</div>
)}
<div>
<div className="accordion-caption text-16-normal">
{t('KONNECTORCONFIG.LABEL_UPDATEDAT')}
</div>
<div className="text-16-bold">{lastExecutionDate}</div>
</div>
<div>{lastExecutionDate}</div>
</div>
<div className="inline-buttons">
<StyledButton
......
function createError(message, reason, innerStack = null, status = null) {
const error = new Error(message)
error.reason = reason
error.innerStack = innerStack
error.status = status
return error
}
export default createError
......@@ -17,19 +17,16 @@ $dark-background: radial-gradient(
$dark-linear-card: linear-gradient(180deg, #323339 0%, #25262b 100%);
/** TEXT COLOR **/
$text-black: black;
$text-bright: #e0e0e0;
$text-dark: #a0a0a0;
$text-white: #ffffff;
$text-blue: #58FFFF;
$text-blue: #58ffff;
$google-text-1: $text-bright;
$google-text-2: $text-dark;
/** RED **/
$red-primary: #D25959;
$red-error: #ce3535;
$red-primary: #d25959;
$red-no-data: #d24444;
/** YELLOW **/
$gold: #b2901b;
......@@ -42,12 +39,21 @@ $orange: #d87b39;
$orange-shadowed: rgba(216, 123, 57, 0.4);
/** BLUE **/
$blue: #58FFFF;
$blue-40: #58FFFF40;
$blue: #58ffff;
$blue-40: #58ffff40;
$blue-shadowed: rgba(58, 152, 236, 0.4);
$blue-gradient: linear-gradient(180deg, #61F0F2 0%, #48C2C4 100%);
$blue-radial-gradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), $blue;
$blue-radial-gradient-transparent: radial-gradient(circle, $blue 0%, rgba(255,255,255,0) 100%);
$blue-gradient: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);
$blue-radial-gradient: radial-gradient(
105.25% 64.58% at 49.68% 70.83%,
rgba(1, 153, 163, 0.5) 0%,
rgba(255, 255, 255, 0) 100%
),
$blue;
$blue-radial-gradient-transparent: radial-gradient(
circle,
$blue 0%,
rgba(255, 255, 255, 0) 100%
);
/** GREEN **/
$green: #45d1b8;
......@@ -60,7 +66,7 @@ $white: rgb(255, 255, 255);
/** GREY **/
$grey-bright: #e0e0e0;
$grey-dark: #7b7b7b;
$grey-background: linear-gradient(180deg, #323339 0%, #25262B 100%);
$grey-background: linear-gradient(180deg, #323339 0%, #25262b 100%);
/** App colors **/
$primary-color: $dark-light;
......@@ -96,10 +102,26 @@ $multi-compare-off-color: #7d6a4e;
$axis-graph: $grey-dark;
/** TABS GRADIENT **/
$multi-color-radial-gradient-transparent: radial-gradient(circle, #e3b82a 0%, rgba(255,255,255,0) 100%);
$elec-color-radial-gradient-transparent: radial-gradient(circle, #d87b39 0%, rgba(255,255,255,0) 100%);
$water-color-radial-gradient-transparent: radial-gradient(circle, #3a98ec 0%, rgba(255,255,255,0) 100%);
$gas-color-radial-gradient-transparent: radial-gradient(circle, #45d1b8 0%, rgba(255,255,255,0) 100%);
$multi-color-radial-gradient-transparent: radial-gradient(
circle,
#e3b82a 0%,
rgba(255, 255, 255, 0) 100%
);
$elec-color-radial-gradient-transparent: radial-gradient(
circle,
#d87b39 0%,
rgba(255, 255, 255, 0) 100%
);
$water-color-radial-gradient-transparent: radial-gradient(
circle,
#3a98ec 0%,
rgba(255, 255, 255, 0) 100%
);
$gas-color-radial-gradient-transparent: radial-gradient(
circle,
#45d1b8 0%,
rgba(255, 255, 255, 0) 100%
);
$multi-color-radial-gradient: radial-gradient(
105.25% 64.58% at 49.68% 70.83%,
......@@ -125,3 +147,8 @@ $water-color-radial-gradient: radial-gradient(
rgba(255, 255, 255, 0) 100%
),
#3a98ec;
/** SCROLLBAR **/
$scrollbar-track: #3e4045;
$scrollbar-thumb: #6f7074;
......@@ -28,7 +28,7 @@ body {
}
[role='banner'] .coz-bar-container {
background-color: white;
background-color: $white;
@media #{$large-phone} {
padding: 0 0 0 0;
background-color: unset;
......@@ -148,10 +148,10 @@ body {
}
/* Track */
&::-webkit-scrollbar-track {
background: #3e4045;
background: $scrollbar-track;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: #6f7074;
background: $scrollbar-thumb;
}
}
......@@ -40,15 +40,15 @@ p {
text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);
}
.red {
color: $red-primary;
}
.blue {
color: $blue-light;
}
.green {
color: $green-2;
}
// .red {
// color: $red-primary;
// }
// .blue {
// color: $blue-light;
// }
// .green {
// color: $green-2;
// }
.text-10-normal {
font-family: $text-font;
......
@import "../base/color";
@import "../base/breakpoint";
.btn-primary
{
height: 3rem;
padding: 0.5vh 2vw 0.5vh 2vw;
background-color: $gold;
border: 1px solid rgba(227, 184, 42, 0.2);
box-shadow: 0px 2px 6px #1E1C1C;
border-radius: 2px;
margin: 1rem 0 1rem 0;
color: $text-black;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
text-transform: capitalize;
&:hover {
cursor: pointer;
background-color: $gold-light;
color: $dark;
}
&:active {
position:relative;
top:1px;
background-color: #c59f1c;
}
&:focus {
cursor: pointer;
outline:none;
}
}
.btn-secondary
{
background-color: $gold-light;
color: $text-black;
height: 3rem;
padding: 0.5vh 2vw 0.5vh 2vw;
margin: 1rem 0 1rem 0;
text-transform: capitalize;
border: 1px solid rgba(227, 184, 42, 0.2);
box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
border-radius: 6px;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 120%;
}
.btn-secondary-negative
{
border: 1px solid $gold-light;
height: 3rem;
padding: 0.5vh 2vw 0.5vh 2vw;
margin: 1rem 0 1rem 0;
text-transform: capitalize;
box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
border-radius: 6px;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 120%;
color: #E0E0E0;
}
.btn-chevron
{
margin: 1rem 1rem 1rem 0;
color: rgb(255,255,255);
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
&:hover {
cursor: pointer;
color: white;
}
}
.btn-long-string {
height: 3rem;
padding: 0.5vh 2vw 0.5vh 2vw;
border: 1px solid #121212;
box-sizing: border-box;
border-radius: 2px;
color: $text-color;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
margin: 1rem 0 1rem 0;
}
/*
.btn {
height: 3rem;
padding: 0.5vh 2vw 0.5vh 2vw;
background-color: $gold;
border: none;
margin: 1rem 0 1rem 0;
color: $text-black;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
text-transform: capitalize;
&.active{
opacity: 0.3;
}
&:hover {
cursor: pointer;
background-color: $gold-light;
color: $dark;
}
&:active {
position:relative;
top:1px;
background-color: #c59f1c;
}
.btn-content{
display: inline-flex;
align-items: center;
.btn-icon{
margin-right: 1.5vw;
}
}
}
*/
......@@ -45,7 +45,7 @@
font-style: normal;
font-weight: normal;
line-height: 120%;
color: white;
color: $white;
}
p {
font-style: normal;
......
......@@ -188,7 +188,7 @@
width: 1.8125rem;
border-radius: 50%;
background: $blue-radial-gradient;
color: $text-black;
color: $dark-light;
margin-right: 1rem;
}
}
......
......@@ -14,7 +14,6 @@
flex-direction: row;
justify-content: space-around;
width: 100%;
// margin-top: 1em;
.cv-date-group {
display: flex;
flex-direction: column;
......@@ -121,9 +120,6 @@
.warning-icon {
margin-right: 4px;
}
.multifluid-compare {
color: $multi-compare-color;
}
.cv-button {
border: none;
background: none;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment