Remove old styles

Author: santiagolizardo

CHANGELOG.md

@@ -1,60 +1 @@
-# Changelog
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [0.8.5]
-
-### Added
-- Add breadcrumbs to target page
-- Add command crud pages
-- Add delete command output button
-- Add delete target button and new NoResultsTableRow component
-- Add edit links
-- Add file size span component
-- Add jsconfig file (to aid with language server support)
-- Add jsconfig.json to docker image
-- Add links to related entities on details page
-- Add markdown support
-- Add user edit form
-- Improve task statuses
-- Introduce task command tab
-
-### Changed
-- Use customised tailwind CSS instead of CDN one
-- Copy craco config to container
-- Do not use absolute src path
-- Extract user form to own component
-- Move user name to header
-- Populate command dropdown dynamically on task form
-- Present some detailed information in two columns
-- Refactor tabs component
-- Rename title
-- Replace component style with classes
-- Restore unordered lists styles
-- Show raw user agent if can't be parsed
-- Use 'strict' makefile
-- Use absolute paths
-- Use new command entity
-- feat: :sparkles: copy code to clipboard
-- feat: :sparkles: sidebar and header now are fixed to scroll
-
-### Fixed
-- Fix bug in command tab
-- Fix command page title
-- Fix issue in command tab
-- Fix issue with user names in project membership
-- Fix small aesthetic issues
-
-### Removed
-- Remove borders from section
-- Remove form max width
-- Remove table cell padding
-- Remove two-columns class
-
-[Unreleased]: https://github.com/reconmap/web-client/compare/0.8.5...master 
-[0.8.5]: https://github.com/reconmap/web-client/compare/0.8.0...0.8.5
-
+The up-to-date change log can be found at https://github.com/reconmap/reconmap/blob/master/CHANGELOG.md

src/components/auth/Login.js

@@ -1,4 +1,4 @@
-import { Button, FormControl, Heading, Input, Text } from "@chakra-ui/react";
+import { Button, FormControl, FormLabel, Heading, Input, Text } from "@chakra-ui/react";
 import PageTitle from "components/logic/PageTitle";
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -47,26 +47,24 @@ const Login = () => {
             ({ login }) => <form onSubmit={ev => handleSubmit(ev, login)} style={{ width: '100%' }}>
                 <PageTitle value="Login" />
                 <FormControl as="fieldset">
-                    <Heading as="legend" size="lg" > Login</Heading>
-                    <label htmlFor="inputUsername" className="sr-only">Username</label>
-                    <Input
-                        autoFocus
-                        isInvalid={error}
-                        isRequired
-                        type="text"
-                        placeholder="Username"
-                        onChange={handleUsername}
-                        id="inputUsername"
-                    />
-                    <label htmlFor="inputPassword" className="sr-only">Password</label>
-                    <Input
-                        isRequired
-                        isInvalid={error}
-                        type="password"
-                        placeholder="Enter password"
-                        onChange={handlePassword}
-                        id="inputPassword"
-                    />
+                    <Heading as="legend" size="lg">Login</Heading>
+
+                    <FormControl isRequired>
+                        <FormLabel htmlFor="inputUsername">Username</FormLabel>
+                        <Input id="inputUsername" type="text"
+                            onChange={handleUsername}
+                            isInvalid={error} isRequired autoFocus
+                        />
+                    </FormControl>
+
+                    <FormControl isRequired>
+                        <FormLabel htmlFor="inputPassword">Password</FormLabel>
+                        <Input id="inputPassword" type="password"
+                            onChange={handlePassword}
+                            isInvalid={error} isRequired
+                        />
+                    </FormControl>
+
                     <Button
                         isLoading={loading}
                         loadingText="Processing..."

src/components/auth/MfaVerification.js

@@ -1,3 +1,4 @@
+import { Input } from "@chakra-ui/react";
 import PrimaryButton from "components/ui/buttons/Primary";
 import { actionCompletedToast } from "components/ui/toast";
 import { AuthContext } from 'contexts/AuthContext';
@@ -34,8 +35,8 @@ const MfaVerification = () => {
             <fieldset>
                 <legend>Two-factor authentication</legend>
                 <p>Enter the 6-digit code generated by your authentication app.</p>
-                <label htmlFor="code" className="sr-only">6-digit MFA code</label>
-                <input type="text" name="code" id="code" placeholder="6 digits code" pattern="[0-9]{6}" maxLength="6" value={code} onChange={onChange} autoFocus required />
+                <label htmlFor="code">6-digit MFA code</label>
+                <Input type="text" name="code" id="code" placeholder="6 digits code" pattern="[0-9]{6}" maxLength="6" value={code} onChange={onChange} autoFocus required />
                 <PrimaryButton type="submit">Verify</PrimaryButton>
             </fieldset>
         </form>

src/components/layout/Header.js

@@ -22,7 +22,7 @@ const Header = () => {
                     <Link to='/' style={{ cursor: 'pointer' }} className='logo'>
                         <h3>
                             <img alt='logo' src={path.join(Configuration.getContextPath(), 'logo.svg')} />
-                            <strong style={{ color: 'var(--text-color)' }} className='from-tablet'>
+                            <strong style={{ color: 'var(--text-color)' }}>
                                 Recon<span style={{ color: 'var(--primary-color)' }}>map</span>
                             </strong>
                         </h3>

src/components/users/Form.js

@@ -65,7 +65,7 @@ const UserForm = ({ isEdit = false, user, userSetter: setUser, onFormSubmit }) =
                             </label>
                             <label>
                                 Send email to user
-                                <Input type="checkbox" name="sendEmailToUser" onChange={onFormChange} />
+                                <Checkbox name="sendEmailToUser" onChange={onFormChange} />
                             </label>
                         </>
                     }

src/components/users/PasswordChange.js

@@ -1,3 +1,4 @@
+import { Input } from "@chakra-ui/react";
 import { actionCompletedToast, errorToast } from "components/ui/toast";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -52,30 +53,28 @@ const UserPasswordChange = () => {
         setSubmitButtonDisabled(passwords.newPassword !== passwords.newPasswordConfirmation);
     }, [passwords]);
 
-    return (
-        <div>
-            <div className='heading'>
-                <Breadcrumb />
-            </div>
-            <form onSubmit={handleCreate}>
-                <Title title="Password Change" type="User" icon={<IconPreferences />} />
-                <label>Current password
-                    <input type="password" name="currentPassword" value={passwords.currentPassword}
-                        onChange={handleFormChange} autoFocus required />
-                </label>
-                <label>New password
-                    <input type="password" name="newPassword" value={passwords.newPassword} onChange={handleFormChange}
-                        required />
-                </label>
-                <label>New password confirmation
-                    <input type="password" name="newPasswordConfirmation" value={passwords.newPasswordConfirmation}
-                        onChange={handleFormChange} required />
-                </label>
-                <PrimaryButton type="submit"
-                    disabled={submitButtonDisabled}>Update</PrimaryButton>
-            </form>
+    return <div>
+        <div className='heading'>
+            <Breadcrumb />
         </div>
-    )
+        <form onSubmit={handleCreate}>
+            <Title title="Password change" type="User" icon={<IconPreferences />} />
+            <label>Current password
+                <Input type="password" name="currentPassword" value={passwords.currentPassword}
+                    onChange={handleFormChange} autoFocus required />
+            </label>
+            <label>New password
+                <Input type="password" name="newPassword" value={passwords.newPassword} onChange={handleFormChange}
+                    required />
+            </label>
+            <label>New password confirmation
+                <Input type="password" name="newPasswordConfirmation" value={passwords.newPasswordConfirmation}
+                    onChange={handleFormChange} required />
+            </label>
+            <PrimaryButton type="submit"
+                disabled={submitButtonDisabled}>Update</PrimaryButton>
+        </form>
+    </div>
 }
 
 export default UserPasswordChange

src/styles/_utilities.scss

@@ -14,21 +14,6 @@
 .only-desktop { display: none; }
 @media (min-width: 1200px) { .only-desktop { display: table-cell; } }
 
-.from-tablet { display: none; }
-@media (min-width: 600px) { .from-tablet { display: table-cell; } }
-
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
 .grid {
     display: grid;
     gap : var(--space);