SASS implementation: base branch of many Dialog refactor branches

package.json

@@ -375,6 +375,7 @@
  "mini-css-extract-plugin": "^2.7.6",
  "ncp": "^2.0.0",
  "node-loader": "^2.0.0",
+ "node-sass": "^9.0.0",
  "postcss": "^8.4.31",
  "postcss-import": "^15.1.0",
  "postcss-loader": "^7.3.3",
@@ -384,6 +385,7 @@
  "react-svg-loader": "^3.0.3",
  "remote-redux-devtools": "^0.5.16",
  "rimraf": "^5.0.5",
+ "sass-loader": "^13.3.2",
  "style-loader": "^3.3.3",
  "stylelint": "^15.11.0",
  "stylelint-config-standard": "^34.0.0",

src/renderer/assets/styles/bookDetailsDialog.css

@@ -251,7 +251,7 @@
  border: none;
  height: 35px;
  background-color: transparent;
- color: black;
+ color: var(--color-primary);
  font-size: 0.9rem;
  border-bottom: 1px solid #c1c1c1;
 }

src/renderer/assets/styles/components/breadcrumb.css

@@ -15,7 +15,9 @@
  font-size: 16px;
  display: flex;
  align-items: center;
- color: rgb(59, 59, 59);
+
+ /* color: rgb(59, 59, 59); */
+ color: var(--color-accent);
  position: fixed;
  top: 123px;
  width: calc(100% - 120px);

src/renderer/assets/styles/components/buttons.css

@@ -49,7 +49,7 @@ button {
  background: none;
  border: 0;
  height: 30px;
- fill: black;
+ fill: var(--color-primary);
  cursor: pointer;
 
  &:hover {
@@ -88,6 +88,7 @@ button {
  height: 14px;
  margin-right: 8px;
  transition: all 0.2s;
+ fill: var(--color-primary);
  }
 
  &.icon_end {
@@ -121,12 +122,14 @@ button {
  width: 14px;
  vertical-align: -2px;
  margin-left: 5px;
+ fill: var(--color-primary);
+
  }
 
  &.button_icon {
  height: 16px;
  padding: 8px 20px;
- background: white;
+ background: var(--color-secondary);
  overflow: visible;
 
  & input {
@@ -212,7 +215,7 @@ button {
 .button_transparency,
 .button_transparency_icon {
  display: inline-block;
- color: #000;
+ color: var(--color-primary);
  transition: all 0.2s;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0);
@@ -221,6 +224,10 @@ button {
  font-weight: 600;
  cursor: pointer;
 
+ & svg {
+ fill: var(--color-primary);
+ }
+
  &:hover {
  background: rgba(0, 0, 0, 0.1);
  }

src/renderer/assets/styles/components/dropdown.css

@@ -101,7 +101,7 @@
  & a,
  & span label {
  text-decoration: none;
- color: black;
+ color: var(--color-primary);
  padding: 0.7rem;
  text-align: center;
  cursor: pointer;

src/renderer/assets/styles/components/inputs.css

@@ -66,7 +66,7 @@ input[type="search"] {
  border-radius: 0;
 
  /* outline: inherit; */
- color: black;
+ color: var(--color-primary);
  font-size: 0.9rem;
 
  &::placeholder {
@@ -153,6 +153,7 @@ form[role="search"] {
  font-size: 16px;
  height: 1.2rem;
  width: 14rem;
+ color: black;
  background: var(--color-medium-grey);
  cursor: pointer;
 

src/renderer/assets/styles/components/modals.css

@@ -47,11 +47,11 @@
  z-index: 102;
  display: flex;
  flex-direction: column;
- background-color: white;
+ background-color: var(--color-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start;
- color: #3b3b3b;
+ color: var(--color-primary);;
  position: relative;
  box-sizing: border-box;
 

src/renderer/assets/styles/components/publications.css

@@ -79,7 +79,8 @@
  overflow: hidden;
  text-align: center;
  margin: 10px 5%;
- color: black;
+ color: var(--color-primary);
+ ;
 
  &:not(:first-child) {
  font-size: 90%;
@@ -373,7 +374,8 @@
  & a,
  & span label {
  text-decoration: none;
- color: black;
+ color: var(--color-primary);
+ ;
  padding: 0.7rem;
  text-align: center;
  cursor: pointer;
@@ -432,7 +434,7 @@
  overflow: hidden;
  text-align: center;
  margin: 10px 5%;
- color: black;
+ color: var(--color-primary);
  }
 
  & .box {

src/renderer/assets/styles/components/tags.css

@@ -57,7 +57,7 @@
  border: none;
  height: 35px;
  background-color: transparent;
- color: black;
+ color: var(--color-primary);
  font-size: 0.9rem;
  border-bottom: 1px solid #c1c1c1;
 

src/renderer/assets/styles/global.css

@@ -1,7 +1,7 @@
 /*
 =-=-= global.css => './partials/variables.css'
 */
-@import url('./partials/variables.css');
+@import url('./partials/variables.scss');
 
 /*
 =-=-= global.css => './partials/mixins.css'
@@ -125,6 +125,7 @@
 
 :root {
  user-select: none;
+ color: var(--color-primary);
 }
 
 *,
@@ -139,7 +140,7 @@ body {
  padding: 0;
  width: 100%;
  font: 1.1rem "Open Sans", sans-serif;
- background: #fbfbfb;
+ background: var(--color-secondary);
 }
 
 section {
@@ -165,6 +166,15 @@ nav + nav + .breadcrumb + .main {
  top: 181px;
 }
 
+table > * {
+ background-color: var(--color-light-grey);
+ color: black !important;
+}
+
+table tr td {
+ border-bottom: 1px solid black;
+}
+
 /* ============== FAST CLASS ================= */
 
 .anchor_link {

src/renderer/assets/styles/header.css

@@ -41,8 +41,8 @@
  margin-right: 60px;
 
  &.active {
- color: black;
- border-bottom: 3px solid black;
+ color: var(--color-primary);
+ border-bottom: 3px solid var(--color-primary);
  padding-bottom: 15px;
  }
  }
@@ -87,7 +87,7 @@
  border: none;
  height: 35px;
  background-color: transparent;
- color: black;
+ color: var(--color-primary);
  font-size: 0.9rem;
  }
 

src/renderer/assets/styles/partials/_screenSizes.scss

@@ -0,0 +1,3 @@
+$laptop : 992px;
+$large : 1200px;
+$tablet : 768px;

src/renderer/assets/styles/partials/mixins.css

@@ -25,10 +25,10 @@
 @define-mixin button_primary {
  position: relative;
  display: inline;
- border: 1px solid black;
+ border: 1px solid var(--color-primary);
  border-radius: 5px;
  text-align: center;
- color: black;
+ color:  var(--color-primary);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;

src/renderer/assets/styles/partials/variables.css

@@ -2,19 +2,36 @@
 =-=-= partials/variables.css
 */
 
-:root {
- /* Colors */
- --color-primary: #4d4d4d;
- --color-secondary: #fff;
- --color-tertiary: #67a3e0;
- --color-disabled: #b7b7b7;
- --color-light-grey: #f1f1f1;
- --color-medium-grey: #e5e5e5;
- --color-accent: rgb(0, 188, 212);
- --color-accent-contrast: #fff;
- --reader-fontColor: #000;
+@media (prefers-color-scheme: light) {
+ :root {
+ /* Colors */
+ --color-primary: #4d4d4d;
+ --color-secondary: #fff;
+ --color-tertiary: #67a3e0;
+ --color-disabled: #b7b7b7;
+ --color-light-grey: #f1f1f1;
+ --color-medium-grey: #e5e5e5;
+ --color-accent: rgb(0, 188, 212);
+ --color-accent-contrast: #fff;
+ --reader-fontColor: #000;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* Colors */
+ --color-primary: #fff;
+ --color-secondary: #4d4d4d;
+ --color-tertiary: #67a3e0;
+ --color-disabled: #b7b7b7;
+ --color-light-grey: #f1f1f1;
+ --color-medium-grey: #e5e5e5;
+ --color-accent: rgb(0, 188, 212);
+ --color-accent-contrast: #fff;
+ --reader-fontColor: #fff;
+ }
 }
 
 .___DEBUG___PARTIALS_VARIABLES_CSS {
  display: none;
-}
+}

src/renderer/assets/styles/partials/variables.scss

@@ -0,0 +1,42 @@
+/*
+=-=-= partials/variables.css
+*/
+@media (prefers-color-scheme: light) {
+ :root {
+ /* Colors */
+ --color-primary: #4d4d4d;
+ --color-secondary: #fff;
+ --color-tertiary: #67a3e0;
+ --color-disabled: #b7b7b7;
+ --color-light-grey: #f1f1f1;
+ --color-medium-grey: #e5e5e5;
+ --color-accent: rgb(0, 188, 212);
+ --color-accent-contrast: #fff;
+ --reader-fontColor: #000;
+ --color-button-primary: rgba(16, 83, 200, 1);
+ --color-button-secondary: rgba(16, 83, 200, 0.05);
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* Colors */
+ --color-primary: #fff;
+ --color-secondary: #4d4d4d;
+ --color-tertiary: #67a3e0;
+ --color-disabled: #b7b7b7;
+ --color-light-grey: #f1f1f1;
+ --color-medium-grey: #e5e5e5;
+ --color-accent: rgb(0, 188, 212);
+ --color-accent-contrast: #fff;
+ --reader-fontColor: #fff;
+ --color-button-primary: rgba(16, 83, 200, 1);
+ --color-button-secondary: rgba(16, 83, 200, 0.05);
+
+
+ }
+}
+
+.___DEBUG___PARTIALS_VARIABLES_CSS {
+ display: none;
+}

src/renderer/assets/styles/reader-app.css

@@ -464,7 +464,7 @@ button {
  }
 
  & > .active {
- color: black;
+ color: var(--color-primary);
  border-bottom: 3px solid black;
  padding-bottom: 15px;
  }
@@ -1266,7 +1266,7 @@ input[type=radio] + label {
  left: 50%;
  background: white;
  font-size: 16px;
- color: black;
+ color: var(--color-primary);
  text-align: center;
  box-shadow: 0 0 46px 0 rgba(0, 0, 0, 0.12);
  transform: translateX(-50%) translateY(0%);

src/renderer/library/components/settings/LanguageSettings.tsx

@@ -38,7 +38,7 @@ class LanguageSettings extends React.Component<IProps, undefined> {
  const { __ } = this.props;
  return (
  <>
- <section>
+ <section className="settings_language-section">
  <div className={stylesGlobal.heading}>
  <h2>{__("settings.language.languageChoice")}</h2>
  </div>

src/renderer/library/components/settings/SessionSettings.tsx

@@ -43,7 +43,7 @@ class SessionSettings extends React.Component<IProps> {
  const { __ } = this.props;
  return (
  <>
- <section>
+ <section className="settings_session-section">
  <div className={stylesGlobal.heading}>
  <h2>{__("settings.session.title")}</h2>
  </div>

src/renderer/library/components/settings/Settings.tsx

@@ -36,10 +36,14 @@ class Settings extends React.Component<IProps, undefined> {
  <LibraryLayout
  title={__("header.settings")}
  >
- <LanguageSettings></LanguageSettings>
- <SessionSettings></SessionSettings>
- <KeyboardSettings></KeyboardSettings>
- <AuthSettings></AuthSettings>
+ <div id="settings-container">
+ <LanguageSettings></LanguageSettings>
+ <div className="settings-container_right">
+ <SessionSettings></SessionSettings>
+ <KeyboardSettings></KeyboardSettings>
+ <AuthSettings></AuthSettings>
+ </div>
+ </div>
  </LibraryLayout>
  </>
  );