From e8d1da58d523048da63b3ebce82e5dc86ad0c55f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 2 Jul 2023 02:18:46 -0700
Subject: [PATCH] Update DurationInput and remove old classes

---
 .../common/DurationInput/index.module.scss    | 20 +-----------------
 components/common/DurationInput/index.tsx     | 21 +++++--------------
 2 files changed, 6 insertions(+), 35 deletions(-)

diff --git a/components/common/DurationInput/index.module.scss b/components/common/DurationInput/index.module.scss
index bfa72e11..14587f66 100644
--- a/components/common/DurationInput/index.module.scss
+++ b/components/common/DurationInput/index.module.scss
@@ -1,4 +1,4 @@
-.Duration {
+.duration {
   align-items: center;
   background: var(--input-bound-bg);
   border: 2px solid transparent;
@@ -14,22 +14,4 @@
     border: 2px solid $blue;
     outline: none;
   }
-
-  .Input {
-    background: transparent;
-    border: none;
-    padding: 0;
-    width: initial;
-    height: 100%;
-    padding: calc($unit-2x - 2px) 0;
-
-    &:hover {
-      background: transparent;
-    }
-
-    &:focus,
-    &:focus-visible {
-      border: none;
-    }
-  }
 }
diff --git a/components/common/DurationInput/index.tsx b/components/common/DurationInput/index.tsx
index b3498555..d9c63c9d 100644
--- a/components/common/DurationInput/index.tsx
+++ b/components/common/DurationInput/index.tsx
@@ -1,6 +1,4 @@
 import React, { useState, ChangeEvent, KeyboardEvent } from 'react'
-import classNames from 'classnames'
-
 import Input from '~components/common/Input'
 import styles from './index.module.scss'
 
@@ -9,13 +7,14 @@ interface Props
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
   > {
+  bound: boolean
   value: number
   onValueChange: (value: number) => void
 }
 
 const DurationInput = React.forwardRef<HTMLInputElement, Props>(
   function DurationInput(
-    { className, value, onValueChange, ...props },
+    { bound, className, value, onValueChange, ...props },
     forwardedRef
   ) {
     // State
@@ -178,16 +177,11 @@ const DurationInput = React.forwardRef<HTMLInputElement, Props>(
     }
 
     return (
-      <div className={classNames(className, { Duration: true })}>
+      <div className={styles.duration}>
         <Input
           ref={minutesRef}
           type="text"
-          className={classNames(
-            {
-              AlignRight: true,
-            },
-            className
-          )}
+          className="alignRight duration"
           value={getMinutes()}
           onChange={handleMinutesChange}
           onKeyUp={handleKeyUp}
@@ -199,12 +193,7 @@ const DurationInput = React.forwardRef<HTMLInputElement, Props>(
         <Input
           ref={secondsRef}
           type="text"
-          className={classNames(
-            {
-              AlignRight: true,
-            },
-            className
-          )}
+          className="alignRight duration"
           value={getSeconds() > 0 ? `${getSeconds()}`.padStart(2, '0') : ''}
           onChange={handleSecondsChange}
           onKeyUp={handleKeyUp}