Merge pull request #37 from eurunuela/tailwind

Style components with Tailwind
ME-ICA · Jan 2, 2022 · 47fc362 · 47fc362
2 parents 6d8e691 + fca624c
commit 47fc362
Show file tree

Hide file tree

Showing 19 changed files with 1,426 additions and 475 deletions.
diff --git a/package.json b/package.json
@@ -8,9 +8,12 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
+    "@reach/rect": "^0.16.0",
+    "@reach/tabs": "^0.16.4",
     "chart.js": "^3.5.0",
     "chartjs-plugin-datalabels": "^2.0.0",
     "chartjs-plugin-zoom": "^1.1.1",
+    "postcss-cli": "^9.1.0",
     "react": "^17.0.2",
     "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
@@ -25,7 +28,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "watch:css": "postcss -w src/styles/tailwind.css -o src/styles/output.css"
   },
   "eslintConfig": {
     "extends": [
@@ -46,8 +50,13 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/jit": "^0.1.18",
+    "autoprefixer": "^10.4.1",
+    "concurrently": "^6.5.1",
     "gulp": "^4.0.2",
     "gulp-inline-source": "^4.0.0",
-    "gulp-replace": "^1.1.3"
+    "gulp-replace": "^1.1.3",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^2.2.19"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+  // plugins: ['@tailwindcss/jit', 'autoprefixer']
+};
diff --git a/src/Info/Info.js b/src/Info/Info.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+class Info extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      info: this.props.info,
+    };
+  }
+
+  render() {
+    return (
+      <div className="mt-16 text-base text-justify whitespace-pre-wrap mx-80 ">
+        <p>{this.state.info}</p>
+      </div>
+    );
+  }
+}
+
+export default Info;
diff --git a/src/Plots/PlotUtils.js b/src/Plots/PlotUtils.js
@@ -1,9 +1,9 @@
-const acceptedColor = "#A8E3A5";
-const acceptedColorHover = "#68AC64";
-const rejedtecColor = "#E99497";
-const rejedtecColorHover = "#B35458";
-const ignoredColor = "#B5DEFF";
-const ignoredColorHover = "#689FCC";
+const acceptedColor = "#86EFAC";
+const acceptedColorHover = "#16A34A";
+const rejedtecColor = "#FCA5A5";
+const rejedtecColorHover = "#DC2626";
+const ignoredColor = "#7DD3FC";
+const ignoredColorHover = "#0284C7";
 
 // This functions converts the data into 4 objects corresponding to the 4 plots.
 // The objects have the necessary structure to feed the chartjs plots.

diff --git a/src/Plots/Plots.js b/src/Plots/Plots.js
@@ -19,12 +19,12 @@ import {
 
 Chart.register(zoomPlugin); // REGISTER PLUGIN
 
-const acceptedColor = "#A8E3A5";
-const acceptedColorHover = "#68AC64";
-const rejedtecColor = "#E99497";
-const rejedtecColorHover = "#B35458";
-const ignoredColor = "#B5DEFF";
-const ignoredColorHover = "#689FCC";
+const acceptedColor = "#86EFAC";
+const acceptedColorHover = "#22C55E";
+const rejedtecColor = "#FCA5A5";
+const rejedtecColorHover = "#EF4444";
+const ignoredColor = "#7DD3FC";
+const ignoredColorHover = "#0EA5E9";
 
 class Plots extends React.Component {
   constructor(props) {
@@ -241,36 +241,37 @@ class Plots extends React.Component {
 
     return (
       <center>
-        <div className="toggle-container">
+        <div className="inline-block mt-10">
           <ToggleSwitch
             values={["accepted", "rejected", "ignored"]}
             selected={this.state.selectedClassification}
-            colors={[acceptedColorHover, rejedtecColorHover, ignoredColorHover]}
+            colors={[acceptedColor, rejedtecColor, ignoredColor]}
             handleNewSelection={this.handleNewSelection.bind(this)}
           />
         </div>
         <ResetAndSave
           handleReset={this.readOriginalData.bind(this)}
           handleSave={this.saveManualClassification.bind(this)}
         />
-        <div className="plot-container-out">
-          <div className="help-text">
+        <div className="table w-full h-auto bg-white">
+          <div className="flex items-center justify-center mt-6 ml-4 text-base text-gray-500 ">
             <p>
               Select an area or use the wheel to zoom in. Shift + click and drag
               to pan.
             </p>
           </div>
-          <div className="plot-container-in">
-            <div className="plot-box kappa_rho">
+          <div className="grid float-left w-1/2 h-auto grid-cols-2 ml-16 bg-white gap-x-1 gap-y-1 plot-container-in">
+            <div className="relative flex items-center justify-center w-full h-full px-1 py-4 text-lg bg-white ">
               <Line
+                className="pt-2"
                 data={this.state.kappaRho}
                 height={21}
                 width={20}
                 options={options_kappa_rho}
                 getElementAtEvent={getScatterElementAtEvent}
               />
             </div>
-            <div className="plot-box">
+            <div className="relative flex items-center justify-center w-full h-full px-1 py-4 text-lg bg-white">
               <Pie
                 data={this.state.variance}
                 height={20}
@@ -279,7 +280,7 @@ class Plots extends React.Component {
                 getElementAtEvent={getPieElementAtEvent}
               />
             </div>
-            <div className="plot-box">
+            <div className="relative flex items-center justify-center w-full h-full px-1 py-4 text-lg bg-white">
               <Line
                 data={this.state.rho}
                 height={21}
@@ -288,7 +289,7 @@ class Plots extends React.Component {
                 getElementAtEvent={getScatterElementAtEvent}
               />
             </div>
-            <div className="plot-box">
+            <div className="relative flex items-center justify-center w-full h-full px-1 py-4 text-lg bg-white">
               <Line
                 data={this.state.kappa}
                 height={21}
@@ -298,9 +299,9 @@ class Plots extends React.Component {
               />
             </div>
           </div>
-          <div className="component-plots-image">
+          <div className="flex float-right w-5/12 mt-12 mr-16 z-5">
             <img
-              className="imgComponentPlot"
+              className="w-full max-w-full"
               alt=""
               src={this.state.clickedElement}
             />

diff --git a/src/Plots/ResetAndSave.js b/src/Plots/ResetAndSave.js
@@ -13,18 +13,31 @@ class ResetAndSave extends Component {
 
   render() {
     return (
-      <div className="plot_tab_container">
-        <div className="plot_tab_box">
-          <li key="Reset" onClick={this.props.handleReset}>
-            <FontAwesomeIcon icon={["fas", "trash"]} className="tab-icon" />
+      <div className="absolute inline-block ml-4 mt-7">
+        <div className="inline-block list-none">
+          <li
+            key="Reset"
+            onClick={this.props.handleReset}
+            className="px-3 py-1 mt-2 text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
+          >
+            <FontAwesomeIcon
+              icon={["fas", "trash"]}
+              size="lg"
+              className="mx-2 -mt-0.5"
+            />
             Reset
           </li>
         </div>
-        <div className="plot_tab_box">
-          <li key="Save" onClick={this.props.handleSave}>
+        <div className="inline-block list-none">
+          <li
+            key="Save"
+            onClick={this.props.handleSave}
+            className="px-3 py-1 mt-2 text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
+          >
             <FontAwesomeIcon
               icon={["fas", "file-download"]}
-              className="tab-icon"
+              size="lg"
+              className="mx-2 -mt-0.5"
             />
             Save
           </li>

diff --git a/src/Plots/ToggleStyles.js b/src/Plots/ToggleStyles.js
@@ -9,31 +9,49 @@ export const Switch = styled.div`
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
 `;
 
+// class Switch extends Component {
+//   render() {
+//     return (
+//       <div className="relative h-24 bg-gray-400 rounded-sm w-fit drop-shadow-sm"></div>
+//     );
+//   }
+// }
+
+// export { Switch };
+
 export const SwitchRadio = styled.input`
   display: none;
 `;
 
+// class SwitchRadio extends Component {
+//   render() {
+//     return <input className="display-none" />;
+//   }
+// }
+
+// export { SwitchRadio };
+
 export const SwitchSelection = styled.span`
   display: block;
   position: absolute;
   z-index: 1;
   top: 0px;
   left: 0px;
-  width: 65px;
+  width: 90px;
   padding: 0 5px;
-  height: 26px;
+  height: 2rem;
   background: #e4e4e4;
-  border-radius: 3px;
+  border-radius: 0.375rem;
   transition: left 0.25s ease-out;
 `;
 
 export const SwitchLabel = styled.label`
   position: relative;
   z-index: 2;
   float: left;
-  width: 65px;
+  width: 90px;
   padding: 0 5px;
-  line-height: 26px;
+  line-height: 2rem;
   color: rgba(0, 0, 0, 0.6);
   text-align: center;
   cursor: pointer;

diff --git a/src/Plots/ToggleSwitch.js b/src/Plots/ToggleSwitch.js
@@ -1,10 +1,5 @@
 import React, { Component } from "react";
-import {
-  Switch,
-  SwitchLabel,
-  SwitchRadio,
-  SwitchSelection,
-} from "./ToggleStyles.js";
+import { Switch, SwitchLabel, SwitchSelection } from "./ToggleStyles.js";
 
 const titleCase = (str) =>
   str
@@ -19,7 +14,8 @@ const ClickableLabel = ({ title, onChange, id }) => (
 );
 
 const ConcealedRadio = ({ value, selected }) => (
-  <SwitchRadio
+  <input
+    className="hidden"
     type="radio"
     name="switch"
     checked={selected === value}
@@ -52,7 +48,7 @@ class ToggleSwitch extends Component {
 
   render() {
     return (
-      <Switch>
+      <div className="relative h-8 -mt-1 font-semibold bg-gray-200 rounded-md w-fit">
         {this.props.values.map((val) => {
           return (
             <span>
@@ -65,7 +61,7 @@ class ToggleSwitch extends Component {
           );
         })}
         <SwitchSelection style={this.selectionStyle()} />
-      </Switch>
+      </div>
     );
   }
 }