refactor(app): starts implementing the UI from Figma

src/renderer/Button.css

@@ -0,0 +1,36 @@
+button[type=button] {
+  background-color: var(--black);
+  color: white;
+  text-transform: uppercase;
+  border: none;
+
+  font-size: small;
+  height: 30px;
+  border-radius: var(--border-radius);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-smaller);
+
+  cursor: pointer;
+}
+
+button[type=button].icon {
+  justify-content: flex-start;
+  padding: 0 var(--gap-smaller) 0 0;
+}
+
+button[type=button] > img {
+  width: 30px;
+  height: 30px;
+}
+
+button[type=button]:hover {
+  background-color: var(--black-hover);
+}
+
+button[type=button]:disabled {
+  background-color: var(--black-disabled);
+  cursor: not-allowed;
+}

src/renderer/Button.tsx

@@ -0,0 +1,32 @@
+import './index.css';
+import './Button.css';
+
+interface buttonOptions {
+  text: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export default function Button(props: buttonOptions) {
+  const { text, icon, disabled } = props;
+
+  if (icon) {
+    return (
+      <button type="button" className="icon" disabled={disabled}>
+        <img src={icon} alt="" />
+        <span>{text}</span>
+      </button>
+    );
+  }
+
+  return (
+    <button type="button" disabled={disabled}>
+      <span>{text}</span>
+    </button>
+  );
+}
+
+Button.defaultProps = {
+  icon: undefined,
+  disabled: false,
+};

src/renderer/TicketOptions.css

@@ -0,0 +1,80 @@
+.stylized-input {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-smaller);
+}
+
+.stylized-input > input {
+  width: 100%;
+  height: 30px;
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.stylized-input > input:focus {
+  outline: none;
+}
+
+.stylized-input > .filepath,
+.stylized-input > .button {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--gap-smaller);
+  height: 30px;
+}
+
+.stylized-input > .filepath {
+  width: 100%;
+  background-color: var(--black-transparent);
+  border-radius: var(--border-radius);
+}
+
+.stylized-input > .button {
+  width: 150px;
+  background-color: var(--black);
+  text-transform: uppercase;
+  justify-content: center;
+  font-size: small;
+  border-radius: var(--border-radius);
+}
+
+.ticket-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-smaller);
+}
+
+.ticket-options > .options {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-smaller);
+}
+
+.ticket-options > .options > .buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-smaller);
+  width: 40%;
+}
+
+.ticket-options > .options > .ticket {
+  display: block;
+  background-color: var(--black-transparent);
+  height: 250px;
+  width: 100%;
+  max-width: 250px;
+  position: relative;
+  border-radius: var(--border-radius);
+}
+
+.ticket-options > .options > .ticket > img {
+  width: 95%;
+  max-height: 95%;
+  position: absolute;
+  top: 2.5%;
+  left: 2.5%;
+
+  object-fit: contain;
+}

src/renderer/TicketOptions.tsx

@@ -0,0 +1,47 @@
+import { useState, ChangeEvent } from 'react';
+import icon from '../../assets/icon.svg';
+import Button from './Button';
+
+import './index.css';
+import './TicketOptions.css';
+
+export default function TicketOptions() {
+  const [selectedFile, setSelectedFile] = useState<File | undefined>(undefined);
+  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+    if (!files || files.length < 1) return;
+
+    setSelectedFile(files[0]);
+    setImageUrl(URL.createObjectURL(files[0]));
+  };
+
+  return (
+    <div className="ticket-options">
+      <div className="stylized-input">
+        <input
+          type="file"
+          onChange={handleFileChange}
+          max="1"
+          accept="image/*"
+        />
+        <span className="button">ouvrir</span>
+        <span className="filepath">{selectedFile?.name}</span>
+      </div>
+
+      <div className="options">
+        <div className="ticket">
+          <img src={imageUrl} alt="single ticket preview" />
+        </div>
+        <div className="buttons">
+          <Button text="retourner horizontalement" icon={icon} />
+          <Button text="retourner verticalement" icon={icon} />
+          <Button text="tourner à droite de 90°" icon={icon} />
+          <Button text="tourner à gauche de 90°" icon={icon} />
+          <Button text="sauvegarder" disabled />
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/index.css

@@ -0,0 +1,51 @@
+/*
+ * @NOTE: Prepend a `~` to css file paths that are in your node_modules
+ *        See https://github.com/webpack-contrib/sass-loader#imports
+ */
+
+:root {
+  --gap: 20px;
+  --gap-smaller: 10px;
+  --black: rgba(0, 0, 0, 0.8);
+  --black-hover: rgba(0, 0, 0, 0.6);
+  --black-disabled: rgba(0, 0, 0, 0.2);
+  --black-transparent: rgba(0, 0, 0, 0.5);
+  --border-radius: 10px;
+}
+
+* {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  position: relative;
+  color: white;
+  height: 100vh;
+  background: linear-gradient(
+    200.96deg,
+    #464646 -29.09%,
+    #4d1127 51.77%,
+    #211427 129.35%
+  );
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-transform: uppercase;
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}