Applications Frills

src/components/button.module.css

@@ -19,7 +19,6 @@
   font-size: 18px;
 }
 
-
 .label {
   margin: 5px 80px;
   position: relative;

src/components/input.module.css

@@ -35,6 +35,10 @@ input:-webkit-autofill:focus
   width: 100%; 
 }
 
+.input:focus, .longInput:focus, .selectInput:focus {
+  outline: none; 
+}
+
 .longInput {
   resize: none;
   vertical-align: bottom;

src/components/password.js

@@ -34,7 +34,7 @@ class Password extends React.Component {
       return (
         <div className={styles.inputContainer}>
           <div className={styles.passwordField}> 
-            <input name={this.props.name} onChange={this.props.onChange} type={this.state.hidden? 'password' : 'text'} className={styles.input} label={this.props.label} placeholder={this.props.placeholder} required={true}/>
+            <input id={styles.passwordInput} name={this.props.name} onChange={this.props.onChange} type={this.state.hidden? 'password' : 'text'} className={styles.input} label={this.props.label} placeholder={this.props.placeholder} required={true}/>
             <div className={styles.visibilityToggle} onClick={this.toggleVisibility}> {this.eyeIcon()} </div>
           </div>
           <p className={styles.label}>{this.props.label}</p>

src/components/password.module.css

@@ -40,6 +40,9 @@ input:-webkit-autofill:focus
   border-bottom: 1px solid var(--textColour); 
 }
 
+#passwordInput:focus {
+  outline: none; 
+}
 .visibilityToggle {
   appearance: none;
   -webkit-appearance: none;