refactor: remove tailwind from editor component

slipHQ · Oct 30, 2021 · 7dc8133 · 7dc8133
1 parent 934086e
commit 7dc8133
Showing 1 changed file with 35 additions and 22 deletions.
diff --git a/packages/run-wasm/src/Editor.tsx b/packages/run-wasm/src/Editor.tsx
@@ -54,21 +54,25 @@ export default function Editor(props: Props) {
     <>
       <div>
         <div>
-          <label className="block pb-4 text-sm font-medium text-gray-700 dark:text-gray-450">
+          <label
+            style={{
+              color: 'rgba(107, 114, 128)',
+              fontSize: '.875rem',
+              fontWeight: 600,
+            }}
+          >
             {languageLabel}
           </label>
 
-          <div className="mt-1 ">
-            <div className="relative group">
-              <div className="absolute -inset-0.5 dark:bg-gradient-to-r from-indigo-300 to-purple-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt" />
+          <div style={{ marginTop: '1rem' }}>
+            <div>
               <MonacoEditor
                 height="20rem"
                 defaultLanguage={defaultLanguage}
                 defaultValue={inputCodeRef.current}
                 onChange={(value) => {
                   inputCodeRef.current = value || ''
                 }}
-                className="block w-1/2  text-white bg-gray-900 border-gray-300 rounded-lg   shadow-sm p-0.5 border   dark:border-purple-300 focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
                 theme="vs-dark"
                 options={{ fontSize: 12, minimap: { enabled: false } }}
                 onMount={handleEditorDidMount}
@@ -78,36 +82,45 @@ export default function Editor(props: Props) {
         </div>
       </div>
 
-      <div className="pt-8 ">
-        <div className="grid items-start justify-left">
-          <div className="relative group">
-            <button
-              className="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7 border-gray-300 disabled:bg-gray-700 disabled:cursor-not-allowed"
-              onClick={() => onRunCode(inputCodeRef.current)}
-              disabled={isLoading}
-            >
-              <span className="text-gray-100 transition duration-200 group-hover:text-gray-100">
-                {!isLoading ? 'Run Code →' : `Loading ${languageLabel}...`}
-              </span>
-            </button>
-          </div>
-        </div>
+      <div style={{ padding: '2rem 0' }}>
+        <button
+          onClick={() => onRunCode(inputCodeRef.current)}
+          disabled={isLoading}
+          style={{
+            borderRadius: '.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '1rem 1.75rem',
+            lineHeight: 1,
+            backgroundColor: 'black',
+          }}
+        >
+          <span style={{ color: 'rgba(243,244,246' }}>
+            {!isLoading ? 'Run Code →' : `Loading ${languageLabel}...`}
+          </span>
+        </button>
       </div>
 
       {children}
 
       {!hideOutputEditor && (
         <div>
-          <label className="block pt-8 text-sm font-medium text-gray-700 dark:text-gray-450">
+          <label
+            style={{
+              color: 'rgba(107, 114, 128)',
+              fontSize: '.875rem',
+              fontWeight: 600,
+            }}
+          >
             Output
           </label>
 
-          <div className="mt-1 dark:text-gray-450">
+          <div style={{ marginTop: '1rem' }}>
             <MonacoEditor
               value={output?.toString()}
               height="20rem"
               defaultLanguage="python"
-              className="block w-1/2 text-white bg-gray-900 border-gray-300 rounded-lg shadow-sm p-0.5 border dark:border-purple-300 focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
               theme="vs-dark"
               options={{
                 readOnly: true,