fix(composer): CSS Cleanup for Sceneviewer (#379)

Co-authored-by: Emily Dodds <dodemily@amazon.com>
awslabs · Nov 17, 2022 · 890dc4d · 890dc4d
1 parent 46be1c4
commit 890dc4d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -154,10 +154,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77,
-        "statements": 76,
-        "functions": 76,
-        "branches": 62,
+        "lines": 77.26,
+        "statements": 76.36,
+        "functions": 76.71,
+        "branches": 62.94,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/SceneViewer.tsx b/packages/scene-composer/src/SceneViewer.tsx
@@ -58,7 +58,7 @@ export const SceneViewer: React.FC<SceneViewerProps> = ({ sceneComposerId, confi
   }, [setSceneLoaded]);
 
   return (
-    <SceneComposerContainer data-testid={'webgl-root'}>
+    <SceneComposerContainer data-testid={'webgl-root'} className='sceneViewer'>
       <SceneComposerInternal
         sceneComposerId={composerId}
         config={{

diff --git a/packages/scene-composer/src/__snapshots__/SceneViewer.spec.tsx.snap b/packages/scene-composer/src/__snapshots__/SceneViewer.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`SceneViewer should render correctly 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 sceneViewer"
   data-testid="webgl-root"
 >
   <div

diff --git a/packages/scene-composer/src/components/RadioButton/radio-button.scss b/packages/scene-composer/src/components/RadioButton/radio-button.scss
@@ -1,13 +1,33 @@
+@mixin radio {
+  appearance: none;
+  background-color: #fff;
+  color: #fff;
+  border: 4px solid #00a1c9;
+  border-radius: 50%;
+  padding: 3px;
+}
+
 input[type="radio"] {
   margin-right: 1rem;
 
   // styled to match Polaris: https://polaris.a2z.com/components/radio-group/
   &:checked {
-    appearance: none;
-    background-color: #fff;
-    color: #fff;
-    border: 4px solid #00a1c9;
-    border-radius: 50%;
-    padding: 3px;
+    @include radio;
+  }
+}
+
+// Sceneviewer override
+.sceneViewer {
+  input[type="radio"] {
+    @include radio;
+    background-color: #2a2e33;
+    border: 1px solid #fff;
+    padding: 5px;
+
+    &:checked,
+    &:focus {
+      @include radio;
+      outline: none;
+    }
   }
-}
+}