chore: Migrate to tailwind

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
   "plugins": [
     ["babel-plugin-wildcard", { "exts": ["json"], "nostrip": true, "noModifyCase": true }],
     [

.dockerignore

@@ -4,7 +4,6 @@
 .vscode
 .eslintrc.yml
 .gitignore
-.sass-lint.yml
 .travis.yml
 
 node_modules

.gitignore

@@ -8,7 +8,6 @@
 *.swp
 *.vi
 *~
-*.sass-cache
 
 # OS or Editor folders
 .DS_Store

README.md

@@ -59,7 +59,6 @@ app
 │   │   └── selectors.js => Re-select selectors to select data in state
 │   └── ...
 ├── static => Static assets, directly copied to the public directory
-├── styles => Stylesheets in .sass format, all included from application.sass
 └── router.jsx => Application router and main entry point
 ```
 

app/API/no_internet_error.js

@@ -1,14 +1,14 @@
 // Used only to show a message when request fail / timeout due to connection problems
+
 import { NO_INTERNET_ERROR } from '../constants'
 import { flashError } from '../state/flashes/reducer'
-import store from '../state/index'
 
 export default function noInternetError() {
-  store.dispatch(
-    flashError({
-      message: NO_INTERNET_ERROR,
-      timeLeft: 999999999999,
-      infoText: 'actions.reload',
-    }),
-  )
+  flashError({
+    title: 'TODO',
+    message: NO_INTERNET_ERROR,
+    infoText: 'actions.reload',
+    variant: 'destructive',
+    duration: 999999999999,
+  })
 }

app/App.jsx

@@ -1,14 +1,14 @@
 // Import polyfills
 // Import styles
-import './styles/application.sass'
+import '@/styles/main.css'
 
 import { ApolloProvider } from '@apollo/client'
 // Import libs
 import React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Configure, Index, InstantSearch } from 'react-instantsearch-dom'
 import { Provider as ReduxProvider } from 'react-redux'
-import { polyfill as smoothSrollPolyfill } from 'smoothscroll-polyfill'
+import { polyfill as smoothScrollPolyfill } from 'smoothscroll-polyfill'
 import { ThemeProvider } from 'styled-components'
 
 // Import APIs so they can load their configurations
@@ -24,7 +24,7 @@ import store from './state'
 import theme from './styles/theme'
 
 // Activate polyfills
-smoothSrollPolyfill()
+smoothScrollPolyfill()
 
 const App = () => (
   <ThemeProvider theme={theme}>

app/components/App/LanguageSelector.jsx

@@ -1,10 +1,17 @@
-import { Box, Flex } from '@rebass/grid'
-import classNames from 'classnames'
 import { Map } from 'immutable'
 import React from 'react'
 import { withNamespaces } from 'react-i18next'
 import { Globe } from 'styled-icons/fa-solid'
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { cn } from '@/lib/css-utils'
+
 const defaultLocales = new Map({
   en: 'English',
   fr: 'Français',
@@ -21,26 +28,25 @@ export default class LanguageSelector extends React.PureComponent {
     const options = defaultLocales.merge(this.props.additionalOptions || {}).sortBy((v, k) => k)
 
     return (
-      <select
-        onChange={(e) => this.props.handleChange(e.target.value)}
-        value={this.props.value}
-        id={this.props.id}
-      >
-        {this.renderLocalesMap(options)}
-      </select>
+      <Select onValueChange={this.props.handleChange} value={this.props.value} id={this.props.id}>
+        <SelectTrigger className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>{this.renderLocalesMap(options)}</SelectContent>
+      </Select>
     )
   }
 
   renderLocalesMap(localesMap) {
     return localesMap.entrySeq().map(([key, value]) => (
-      <option key={key} value={key}>
+      <SelectItem key={key} value={key}>
         {value}
-      </option>
+      </SelectItem>
     ))
   }
 
   renderIcon() {
-    const { value, size } = this.props
+    const { value } = this.props
     if (value === 'fr') {
       return '🇫🇷'
     } else if (value === 'en') {
@@ -56,16 +62,15 @@ export default class LanguageSelector extends React.PureComponent {
     } else if (value === 'ru') {
       return '🇷🇺'
     }
-    return <Globe size={!size ? '2em' : '1em'} />
+    return <Globe size={'2em'} />
   }
 
   render() {
-    const sizeClass = this.props.size ? `is-${this.props.size}` : null
     return (
-      <Flex className={classNames('language-selector', this.props.className)} alignItems="center">
-        {this.props.withIcon && <Box mx="0.5em">{this.renderIcon()}</Box>}
-        <span className={classNames('select', sizeClass)}>{this.renderSelect()}</span>
-      </Flex>
+      <div className={cn('flex items-center', this.props.className)}>
+        {this.props.withIcon && <div className="mr-2">{this.renderIcon()}</div>}
+        {this.renderSelect()}
+      </div>
     )
   }
 }

app/components/App/Layout.jsx

@@ -3,8 +3,8 @@ import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
 import { MainModalContainer } from '../Modal/MainModalContainer'
+import { Toaster } from '../ui/toaster'
 import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
-import { FlashMessages } from '../Utils'
 import BackgroundNotifier from './BackgroundNotifier'
 import CrashReportPage from './CrashReportPage'
 import Navbar from './Navbar'
@@ -51,21 +51,23 @@ export default class Layout extends React.PureComponent {
     const mainContainerClass = sidebarExpended ? undefined : 'expended'
 
     return (
-      <div id="main-layout" lang={locale}>
-        {this.renderMetadata()}
-        <MainModalContainer />
-        <FlashMessages />
-        <Navbar />
-        <Sidebar />
-        <div id="main-container" className={mainContainerClass}>
-          {!this.state.error ? children : <CrashReportPage error={this.state.error} />}
+      <React.Fragment>
+        <div id="main-layout" lang={locale}>
+          {this.renderMetadata()}
+          <MainModalContainer />
+          <Navbar />
+          <Sidebar />
+          <div id="main-container" className={mainContainerClass}>
+            {!this.state.error ? children : <CrashReportPage error={this.state.error} />}
+          </div>
+          <BackgroundNotifier />
+          <PublicAchievementUnlocker
+            achievementId={4}
+            meetConditionsFunc={this.checkExtensionInstall}
+          />
         </div>
-        <BackgroundNotifier />
-        <PublicAchievementUnlocker
-          achievementId={4}
-          meetConditionsFunc={this.checkExtensionInstall}
-        />
-      </div>
+        <Toaster />
+      </React.Fragment>
     )
   }
 

app/components/App/Logo.jsx

@@ -29,10 +29,12 @@ const Image = styled.img`
  * The main website logo.
  */
 const Logo = ({ borderless, height }) => (
-  <LogoContainer size={height}>
+  <LogoContainer size={height} className="tracking-wide">
     <Image alt="C" src={borderless ? borderlessLogo : logo} />
-    <Span ml="1px">aptain</Span>
-    <Span fontWeight="bold" mr={1}>
+    <Span className="text-xl" ml="1px">
+      aptain
+    </Span>
+    <Span className="text-xl" fontWeight="bold" mr={1}>
       Fact
     </Span>
   </LogoContainer>

app/components/App/Navbar.jsx

@@ -22,6 +22,7 @@ import Container from '../StyledUtils/Container'
 import { fadeIn } from '../StyledUtils/Keyframes'
 import StyledLink from '../StyledUtils/StyledLink'
 import { Span } from '../StyledUtils/Text'
+import { Button } from '../ui/button'
 import ScoreTag from '../Users/ScoreTag'
 import UserAppellation from '../Users/UserAppellation'
 import UserMenu from '../Users/UserMenu'
@@ -260,29 +261,14 @@ const Navbar = ({
                 </MenuPopup>
               </Flex>
             ) : (
-              <React.Fragment>
-                <StyledLink
-                  to={{ pathname: '/login', state: { redirect: loginRedirect } }}
-                  className="button is-primary is-outlined"
-                  mr={2}
-                >
-                  <span>{t('menu.login')}</span>
-                </StyledLink>
-                <StyledLink
-                  display={['none !important', 'inline-flex !important']}
-                  to="/extension"
-                  className="button is-primary"
-                  mr={2}
-                >
-                  <span>{t('menu.extension')}</span>
-                </StyledLink>
-                <Link
-                  to={{ pathname: '/signup', state: { redirect: loginRedirect } }}
-                  className="button is-primary"
-                >
-                  <span>{t('menu.signup')}</span>
+              <div className="flex gap-2">
+                <Link to="/extension" className="hidden sm:inline-flex" mr={2}>
+                  <Button variant="outline">{t('menu.extension')}</Button>
+                </Link>
+                <Link to={{ pathname: '/login', state: { redirect: loginRedirect } }} mr={2}>
+                  <Button>{t('menu.login')}</Button>
                 </Link>
-              </React.Fragment>
+              </div>
             )}
           </Flex>
         )}