Upgrade to Bootstrap 5

Liggliluff · Dec 18, 2021 · 3ee4421 · 3ee4421
1 parent 5d34719
commit 3ee4421
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 147 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.12",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^5.1.3",
     "classnames": "^2.2.6",
     "i18next": "^20.3.2",
     "lodash": "^4.17.20",
@@ -35,7 +35,7 @@
     "react-i18next": "^11.11.0",
     "react-select": "^4.3.1",
     "react-topbar-progress-indicator": "^4.1.0",
-    "reactstrap": "^8.7.1",
+    "reactstrap": "^9.0.1",
     "rimraf": "^3.0.2",
     "sass": "^1.29.0",
     "urlcat": "^2.0.4"

diff --git a/public/locales/hu/common.json b/public/locales/hu/common.json
@@ -1,6 +1,6 @@
 {
   "seoDescription": "Generálj időpont jelölőket a Discord üzeneteidhez",
-  "howTo": "Válassz egy dátumot, másold ki a kívánt jelölőt a {{syntaxColName}} oszlopból, majd másold be bárhova egy üzenetbe. Az eredmény egy dinamikus időbélyeg lesz, ami mindenkinek máshogy fog megjelenni a saját időzónájuktól függően.",
+  "howTo": "Válassz egy dátumot, másold ki a kívánt jelölőt a {{syntaxColName}} oszlopból, majd illeszd be az üzenetedbe. Az eredmény egy dinamikus időbélyeg lesz, ami mindenkinek a saját időzónája alapján fog megjelenni.",
   "input": {
     "date": "Dátum és idő",
     "timezone": "Időzóna"
@@ -18,5 +18,5 @@
   "builtWith": "A weboldal az <1>Ingyenes Font Awesome</1> segítségével készült",
   "openSource": "Nyílt forráskódú szoftver",
   "viewSource": "Forráskód megtekintése",
-  "notAffiliated": "A projektnek semmilyen kapcsolata nincs a Discord-dal."
+  "notAffiliated": "A projekt nem áll kapcsolatban a Discord-dal."
 }
diff --git a/src/app.scss b/src/app.scss
@@ -1,23 +1,26 @@
-@import 'scss/vars';
 @import 'scss/functions';
-@import '~bootstrap/scss/bootstrap';
+@import 'scss/bootstrap';
 @import '~@fortawesome/fontawesome-svg-core/styles.css';
 
 :root {
   color-scheme: dark;
 
   &[dir='rtl'] {
-    .input-group > .input-group-prepend > {
+    .input-group > {
       .btn,
       .input-group-text {
-        border-radius: 0 $input-border-radius $input-border-radius 0;
+        &:first-child {
+          border-radius: 0 $input-border-radius $input-border-radius 0;
+        }
       }
     }
 
     .input-group > {
-      .form-control:last-child,
-      .input-group-append > .input-group-text {
-        border-radius: $input-border-radius 0 0 $input-border-radius;
+      .form-control,
+      .input-group-text {
+        &:last-child {
+          border-radius: $input-border-radius 0 0 $input-border-radius;
+        }
       }
     }
   }
@@ -28,7 +31,7 @@
 }
 
 html {
-  background-color: $dark;
+  background-color: $body-bg;
   font-size: 100%;
   min-height: 100vh;
 }

diff --git a/src/components/DateTimeInput.tsx b/src/components/DateTimeInput.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import styles from 'modules/TimestampPicker.module.scss';
 import { ChangeEventHandler, VFC } from 'react';
-import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { Input, InputGroup, InputGroupText } from 'reactstrap';
 
 interface DateTimeInputProps {
   id: string;
@@ -17,11 +17,9 @@ interface DateTimeInputProps {
 
 export const DateTimeInput: VFC<DateTimeInputProps> = ({ id, value, icon, className, onChange, type, readOnly }) => (
   <InputGroup className={classNames(styles.dateInputGroup, className)}>
-    <InputGroupAddon addonType="prepend">
-      <InputGroupText tag="label" htmlFor={id} className={styles.inputAddon}>
-        <FontAwesomeIcon icon={icon} fixedWidth />
-      </InputGroupText>
-    </InputGroupAddon>
+    <InputGroupText tag="label" htmlFor={id} className={styles.inputAddon}>
+      <FontAwesomeIcon icon={icon} fixedWidth />
+    </InputGroupText>
     <Input type={type} bsSize="lg" id={id} value={value} onChange={onChange} disabled={readOnly} tabIndex={readOnly ? -1 : undefined} />
   </InputGroup>
 );
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
@@ -24,12 +24,12 @@ export const LanguageSelector: VFC<{ className?: string }> = ({ className }) =>
   );
 
   return (
-    <UncontrolledDropdown tag="span" className={classNames(className, styles.languageSelector)}>
+    <UncontrolledDropdown className={classNames(className, styles.languageSelector)}>
       <DropdownToggle color="link" caret>
         <FontAwesomeIcon icon="globe" />
         <span className={styles.currentLangName}>{nativeLangName}</span>
       </DropdownToggle>
-      <DropdownMenu right>
+      <DropdownMenu end dark>
         <DropdownItem header className={styles.item}>
           {t('common:changeLanguage')}
         </DropdownItem>

diff --git a/src/components/TimestampPicker.tsx b/src/components/TimestampPicker.tsx
@@ -105,12 +105,12 @@ export const TimestampPicker: FC<PropTypes> = ({
 
   return (
     <div className={styles.datepicker}>
-      <Row form>
+      <Row>
         <Col md>
           <FormGroup>
             <Label className={styles.formLabel}>{t('common:input.date')}</Label>
 
-            <Row form>
+            <Row>
               <Col xl={6}>
                 <DateTimeInput
                   type="date"

diff --git a/src/components/TimestampsTable.tsx b/src/components/TimestampsTable.tsx
@@ -5,7 +5,7 @@ import styles from 'modules/TimestampsTable.module.scss';
 import moment, { Moment } from 'moment-timezone';
 import { useEffect, useMemo, useState, VFC, VoidFunctionComponent } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Button, Col, InputGroup, InputGroupAddon, InputGroupText, Row, Table } from 'reactstrap';
+import { Button, Col, InputGroup, InputGroupText, Row, Table } from 'reactstrap';
 
 interface TimeValue {
   example: string;
@@ -56,16 +56,12 @@ const IconCol: VoidFunctionComponent<{ i: number }> = ({ i }) => {
 
 const CopySyntax: VoidFunctionComponent<{ syntax: string; className?: string }> = ({ syntax, className }) => (
   <InputGroup className={classNames(`${styles.syntaxInputGroup} flex-nowrap ${syntaxJustifyClasses}`, className)}>
-    <InputGroupAddon addonType="prepend">
-      <CopyToClipboard text={syntax}>
-        <Button color="discord">
-          <FontAwesomeIcon icon="clipboard" />
-        </Button>
-      </CopyToClipboard>
-    </InputGroupAddon>
-    <InputGroupAddon addonType="append">
-      <InputGroupText className={`${styles.codeText} text-monospace`}>{syntax}</InputGroupText>
-    </InputGroupAddon>
+    <CopyToClipboard text={syntax}>
+      <Button color="discord">
+        <FontAwesomeIcon icon="clipboard" />
+      </Button>
+    </CopyToClipboard>
+    <InputGroupText className={`${styles.codeText} font-monospace`}>{syntax}</InputGroupText>
   </InputGroup>
 );
 
@@ -150,7 +146,7 @@ export const TimestampsTable: VFC<PropTypes> = ({ t, locale, timestamp, timeInSe
                 </Col>
                 <Col className={`d-${extendFromBreakpoint}-none`}>
                   <p className="flex-grow-1">
-                    <FontAwesomeIcon icon="eye" className="mr-2" />
+                    <FontAwesomeIcon icon="eye" className="me-2" />
                     {value.example}
                   </p>
                 </Col>

diff --git a/src/scss/_bootstrap.scss b/src/scss/_bootstrap.scss
@@ -0,0 +1,41 @@
+// Required
+@import '~bootstrap/scss/functions';
+
+@import 'vars';
+
+// Required
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    'background-color':
+      map-merge(
+        map-get($utilities, 'background-color'),
+        (
+          values: map-merge(map-get(map-get($utilities, 'background-color'), 'values'), $custom-colors),
+        )
+      ),
+  )
+);
+
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+
+// Optional Bootstrap components here
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/containers';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/helpers';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/tooltip';
+
+@import '~bootstrap/scss/utilities/api';
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
@@ -21,14 +21,7 @@ $input-disabled-bg: darken($code-bg, 3%);
 $input-group-addon-bg: darken($code-bg, 8%);
 $input-border-color: $code-border-color;
 $input-color: $body-color;
-$custom-select-indicator-color: $body-color;
 
-$theme-colors: (
+$custom-colors: (
   discord: $discord,
 );
-
-$rbt-color-primary: $discord;
-$rbt-color-disabled: $body-color;
-$rbt-color-white: #fff;
-$rbt-background-color-disabled: $input-disabled-bg;
-$rbt-placeholder-color: $input-color;
diff --git a/src/scss/modules/LanguageSelector.module.scss b/src/scss/modules/LanguageSelector.module.scss
@@ -1,4 +1,6 @@
 .language-selector {
+  display: inline-block;
+
   .current-lang-name {
     margin: 0 0.5rem;
   }
@@ -10,7 +12,7 @@
   }
 
   .current-label {
-    color: green;
+    color: hsl(120, 70%, 50%);
     font-size: 0.7em;
     font-weight: 700;
     text-transform: uppercase;