From 1ffbf15ea3ad82f5d948c110405b35ea26c1af3a Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Thu, 23 Jun 2016 13:38:49 -0300 Subject: [PATCH] T-249: Adjusting measurements panel styles --- Packages/design/styles/variables.styl | 6 +++ .../components/lesionTable/lesionTable.html | 14 +++-- .../components/lesionTable/lesionTable.styl | 10 ++-- .../lesionTableHeaderRow.styl | 53 ++++++++++--------- .../lesionTableRow/lesionTableRow.styl | 28 ++++++---- .../lesionTableTimepointHeader.html | 6 +-- .../lesionTableTimepointHeader.styl | 13 +++-- .../lesionTableView/lesionTableView.styl | 3 +- .../radialProgressBar/radialProgressBar.styl | 3 +- .../worklistResult/worklistResult.styl | 10 ++-- 10 files changed, 80 insertions(+), 66 deletions(-) diff --git a/Packages/design/styles/variables.styl b/Packages/design/styles/variables.styl index ebbf65165..a26e3bced 100644 --- a/Packages/design/styles/variables.styl +++ b/Packages/design/styles/variables.styl @@ -9,6 +9,12 @@ $primaryBackgroundColor = #000000 $boxBackgroundColor = #3E5975 $boxBackgroundColorDark = #22374D +// Common pallete +$uiSkyBlue = #6FBDE2 +$uiGrayDark = #263340 +$uiGrayDarker = #16202B +$uiGrayDarkest = #151A1F + // Text Colors $textPrimaryColor = #ffffff $textSecondaryColor = #91B9CD diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html index 65f90a9a1..be3014c16 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html +++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html @@ -1,15 +1,13 @@ \ No newline at end of file + diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl index 11cf03130..4695fb490 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl +++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl @@ -1,17 +1,15 @@ @import "{design}/app" #lesionTableContainer - width: 100% + background-color: $primaryBackgroundColor height: calc(100% - 105px) - background-color: #000000 + width: 100% .lesionTableTimepointHeaderRow display: flex - - .spacer - width: 20px + padding: 2px 2px 0 44px .lesionTableLayoutChanger + margin: 0 auto padding: 20px text-align: center - margin: 0 auto diff --git a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl index 7c8288d7a..f04fc8c14 100644 --- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl @@ -3,59 +3,62 @@ $headerRowHeight = 63px .lesionTableHeaderRow - border-top: 2px solid black - background: #151a1f + background-color: $uiGrayDarkest color: $textSecondaryColor - fill: $textSecondaryColor - width: 316px - height: $headerRowHeight display: flex + fill: $textSecondaryColor + height: $headerRowHeight line-height: $headerRowHeight + margin-top: 2px + width: 316px div + align-items: stretch flex: 1 justify-content: space-around - align-items: stretch text-align: center .add - padding: 0 10px - max-width: 40px cursor: pointer + max-width: 30px + padding-left: 2px svg height: $headerRowHeight max-width: 11px .type + color: $textSecondaryColor + font-size: 22px + font-weight: 300 + line-height: $headerRowHeight padding: 0 10px text-align: left - font-weight: 300 - color: #91b9cd - height: $headerRowHeight - font-size: 13pt .numberOfLesions float: right - color: #6fbde2 - font-weight: 100 + color: $uiSkyBlue + font-weight: 300 font-size: 40px - max-width: 50px - margin-right: 5px + max-width: 54px height: $headerRowHeight - line-height: $headerRowHeight + line-height: 66px .max height: $headerRowHeight + max-width: 64px + text-align: right .maxNumLesions - margin: 21px auto - height: 20px - line-height: 20px - width: 47px - font-size: 12px - text-transform: uppercase - font-weight: 500 + background-color: $textSecondaryColor; border-radius: 3px color: black - background-color: $textSecondaryColor; + display: table + font-size: 12px + font-weight: 500 + height: 19px + line-height: 17px + margin-left: auto + margin-top: 22px + padding: 2px 6px 0 + text-transform: uppercase diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl index a82fcc72f..6dd506dfa 100644 --- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl @@ -2,45 +2,51 @@ .lesionTableRow display: flex - border-top: 2px solid black height: 63px + margin-top: 2px width: 100% .lesionRowSidebar - flex: 1 + background: $uiGrayDark color: $textSecondaryColor - background: $darkUiColor + flex: 1 max-width: 30px + padding-right: 5px .lesionNumber + font-size: 14px + font-weight: 400 + padding-top: 10px text-align: center - font-weight: 200 - padding: 3px &.active border-left: 4px $activeColor solid .lesionDetails flex: 1 - padding-left: 20px - padding-top: 5px + padding: 5px 2px 0 14px display: flex flex-direction: column align-items: stretch .location flex: 1 - font-weight: 200 + font-weight: 400 font-size: 14px color: $textSecondaryColor - height: 20px + height: 30px + line-height: 30px + margin-left: -2px width: 100% .timepointData display: flex + margin-top: 1px div - font-weight: 200 - padding-bottom: 10px flex: 1 + font-size: 14px + font-weight: 400 justify-content: space-around + line-height: 18px + padding-bottom: 10px diff --git a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html index a9f86852f..1ac948055 100644 --- a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html +++ b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html @@ -1,10 +1,10 @@ \ No newline at end of file + diff --git a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl index 2f9bcd009..93e732fc5 100644 --- a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl +++ b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl @@ -2,16 +2,21 @@ .lesionTableTimepointHeader flex: 1 - padding-left: 20px justify-content: space-around div - text-align: center + border-left: $uiBorderColor $uiBorderThickness solid + font-weight: 400 + padding-left: 12px + text-align: left .timepointName color: $textSecondaryColor + font-size: 12px + line-height: 12px .timepointDate - font-weight: 200 color: $textPrimaryColor - border-left: $uiBorderColor $uiBorderThickness solid + font-size: 14px + line-height: 20px + padding-bottom: 6px diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl index 62882c541..bd69eacae 100644 --- a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl +++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl @@ -5,9 +5,8 @@ overflow-y: auto margin-right: -16px padding-bottom: 100px - padding-right: 16px -webkit-overflow-scrolling: touch &::-webkit-scrollbar - display: none \ No newline at end of file + display: none diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl index 24bbe4f95..969b25a8b 100644 --- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl +++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl @@ -1,7 +1,6 @@ @import "{design}/app" $circleSize = 46px -$progressTextColor = #6fbde2 .radialProgress height: $circleSize @@ -34,7 +33,7 @@ $progressTextColor = #6fbde2 font-weight: 700 font-size: 17px text-align: center - color: $progressTextColor + color: $uiSkyBlue top: 0 svg diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl index 14b29fa18..c625650a7 100644 --- a/Packages/worklist/client/components/worklistResult/worklistResult.styl +++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl @@ -8,13 +8,13 @@ $inputBackgroundColor = #2c363f $inputPlaceholderColor = lightgray $studyListToolbarHeight = 75px -$theadBackgroundColor = #151a1f +$theadBackgroundColor = $uiGrayDarkest $tablePadding = 8% $bodyCellHeight = 40px .studyListToolbar height: $studyListToolbarHeight - background: #151a1f + background: $uiGrayDarkest border-bottom: 2px solid black padding: 0 30px @@ -35,7 +35,7 @@ $bodyCellHeight = 40px .studyCount font-size: 40px font-weight: 100 - color: #6fbde2 + color: $uiSkyBlue padding: 0 10px line-height: $studyListToolbarHeight @@ -149,7 +149,7 @@ $bodyCellHeight = 40px background-color: black &:nth-child(even) - background-color: #151a1f + background-color: $uiGrayDarkest td height: $bodyCellHeight @@ -175,4 +175,4 @@ $bodyCellHeight = 40px // This selector is necessary to override bootstrap's 'table' class border-top: 1px solid #436270 border-bottom: 1px solid #436270 - background-color: $hoverColor \ No newline at end of file + background-color: $hoverColor