From f2bc25feacace1e63bff9d2907f5f4623acff1c8 Mon Sep 17 00:00:00 2001
From: Biki-das <bikid475@gmail.com>
Date: Sat, 1 Jul 2023 09:42:39 +0530
Subject: [PATCH 1/2] Removed unused CSS

---
 .../views/Components/EditableValue.css        |  5 ----
 .../src/devtools/views/Components/Element.css |  5 ----
 .../views/Components/InspectedElement.js      | 14 ++--------
 .../devtools/views/Components/KeyValue.css    | 13 ---------
 .../NativeStyleEditor/StyleEditor.css         |  6 ----
 .../views/Components/NewArrayValue.css        |  1 -
 .../devtools/views/Components/OwnersStack.js  |  5 +---
 .../views/Profiler/HoveredFiberInfo.css       |  4 ---
 .../Profiler/SidebarSelectedFiberInfo.css     |  4 ---
 .../Profiler/SidebarSelectedFiberInfo.js      |  1 -
 .../src/devtools/views/SearchInput.css        |  6 +---
 .../src/devtools/views/SearchInput.js         |  3 --
 .../src/devtools/views/Toggle.css             |  6 ----
 .../views/UnsupportedBridgeProtocolDialog.css |  4 ---
 .../views/UnsupportedVersionDialog.css        |  6 ----
 .../src/EventTooltip.css                      |  1 -
 .../react-devtools-timeline/src/Timeline.css  | 28 -------------------
 17 files changed, 4 insertions(+), 108 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
index ef5fa73675e71..9c0efcbe60d65 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
@@ -33,8 +33,3 @@
   background-color: var(--color-button-background-focus);
   outline: none;
 }
-
-.ResetButton {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
index 5939ff1cc9598..7d89010d72ece 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -22,11 +22,6 @@
   user-select: none;
 }
 
-.ScrollAnchor {
-  height: 100%;
-  width: 0;
-}
-
 .SelectedElement {
   background-color: var(--color-background-selected);
   color: var(--color-text-selected);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 69d919fcef246..0754a2066e31a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -263,25 +263,19 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         <div className={styles.SelectedComponentName}>
           <div
             className={
-              element.isStrictModeNonCompliant
-                ? styles.StrictModeNonCompliantComponent
-                : styles.Component
+              element.isStrictModeNonCompliant ? undefined : styles.Component
             }
             title={element.displayName}>
             {element.displayName}
           </div>
         </div>
         {canOpenInEditor && (
-          <Button
-            className={styles.IconButton}
-            onClick={onOpenInEditor}
-            title="Open in editor">
+          <Button onClick={onOpenInEditor} title="Open in editor">
             <ButtonIcon type="editor" />
           </Button>
         )}
         {canToggleError && (
           <Toggle
-            className={styles.IconButton}
             isChecked={isErrored}
             onChange={toggleErrored}
             title={
@@ -294,7 +288,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {canToggleSuspense && (
           <Toggle
-            className={styles.IconButton}
             isChecked={isSuspended}
             onChange={toggleSuspended}
             title={
@@ -307,7 +300,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {store.supportsNativeInspection && (
           <Button
-            className={styles.IconButton}
             onClick={highlightElement}
             title="Inspect the matching DOM element">
             <ButtonIcon type="view-dom" />
@@ -315,7 +307,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {!hideLogAction && (
           <Button
-            className={styles.IconButton}
             onClick={logElement}
             title="Log this component data to the console">
             <ButtonIcon type="log-data" />
@@ -323,7 +314,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {!hideViewSourceAction && (
           <Button
-            className={styles.IconButton}
             disabled={!canViewSource}
             onClick={viewSource}
             title="View source for this element">
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index 0f6bee239d3d8..d6851be672cff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -2,10 +2,6 @@
   display: flex;
 }
 
-.DisabledItem {
-  opacity: 0.5;
-}
-
 .Name {
   color: var(--color-attribute-name-not-editable);
   flex: 0 0 auto;
@@ -40,20 +36,11 @@
   flex: 1;
 }
 
-.None {
-  color: var(--color-dimmer);
-  font-style: italic;
-}
-
 .ExpandCollapseToggleSpacer {
   flex: 0 0 1rem;
   width: 1rem;
 }
 
-.Empty {
-  color: var(--color-dimmer);
-}
-
 .DeleteArrayItemButton {
   padding: 0;
   margin-right: 0.125rem;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
index bbaaf16ea5829..fcb3a3122c5fe 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -50,9 +50,3 @@
   box-shadow: 0px 1px 3px var(--color-shadow);
 }
 
-.Empty {
-  color: var(--color-dimmer);
-  font-style: italic;
-  user-select: none;
-  padding-left: 1rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
index 5adf42ee11909..74217d8fd6cc4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
@@ -13,7 +13,6 @@
   color: var(--color-text-invalid) !important;
 }
 
-.Input:focus,
 .Invalid:focus {
   background-color: var(--color-button-background-focus);
 }
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index c557e374ab2f5..27c57fda5f933 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -191,10 +191,7 @@ export default function OwnerStack(): React.Node {
           ))}
       </div>
       <div className={styles.VRule} />
-      <Button
-        className={styles.IconButton}
-        onClick={() => selectOwner(null)}
-        title="Back to tree view">
+      <Button onClick={() => selectOwner(null)} title="Back to tree view">
         <ButtonIcon type="close" />
       </Button>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
index 3255b321d31fd..c7fd8bbaba249 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -22,10 +22,6 @@
   text-overflow: ellipsis;
 }
 
-.Label {
-  font-weight: bold;
-}
-
 .CurrentCommit {
   margin: 0.25rem 0;
   display: block;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index de19c10391653..090658d64214d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -13,10 +13,6 @@
   overflow-y: auto;
 }
 
-.WhatChanged {
-  margin-bottom: 1rem;
-}
-
 .Component {
   flex: 1;
   color: var(--color-component-name);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 930183ee0cc65..205a3aefa46fa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -108,7 +108,6 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
         </div>
 
         <Button
-          className={styles.IconButton}
           onClick={() => selectFiber(null, null)}
           title="Back to commit view">
           <ButtonIcon type="close" />
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.css b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
index 5db009aa13702..960bb152cb22b 100644
--- a/packages/react-devtools-shared/src/devtools/views/SearchInput.css
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
@@ -28,8 +28,7 @@
   white-space: pre;
 }
 
-.LeftVRule,
-.RightVRule {
+.LeftVRule{
   height: 20px;
   width: 1px;
   background-color: var(--color-border);
@@ -37,6 +36,3 @@
 .LeftVRule {
   margin: 0 0.25rem 0 0.5rem;
 }
-.RightVRule {
-  margin: 0 0.5rem 0 0.25rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
index 8a43202f87c30..d50026d73bebe 100644
--- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -104,7 +104,6 @@ export default function SearchInput({
           <div className={styles.LeftVRule} />
           <Button
             data-testname={testName ? `${testName}-PreviousButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={goToPreviousResult}
             title={
@@ -117,7 +116,6 @@ export default function SearchInput({
           </Button>
           <Button
             data-testname={testName ? `${testName}-NextButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={goToNextResult}
             title={
@@ -129,7 +127,6 @@ export default function SearchInput({
           </Button>
           <Button
             data-testname={testName ? `${testName}-ResetButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={resetSearch}
             title="Reset search">
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.css b/packages/react-devtools-shared/src/devtools/views/Toggle.css
index a5f273bda43b6..85cfe09f81ff5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.css
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.css
@@ -46,9 +46,3 @@
   color: var(--color-button-disabled);
   cursor: default;
 }
-
-.Input {
-  width: 0;
-  margin: 0;
-  opacity: 0;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
index ae4d73fd78142..12e7fbcfd2772 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
@@ -8,10 +8,6 @@
   margin-bottom: 0.5rem;  
 } 
 
-.ReleaseNotesLink { 
-  color: var(--color-button-active);  
-}
-
 .Version {
   color: var(--color-bridge-version-number);
   font-weight: bold;
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
index 5c183f1fe60fa..c33cf79cebe79 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
@@ -4,12 +4,6 @@
   align-items: center;  
 } 
 
-.Column { 
-  display: flex;  
-  flex-direction: column; 
-  align-items: center;  
-} 
-
 .Title {  
   font-size: var(--font-size-sans-large); 
   margin-bottom: 0.5rem;  
diff --git a/packages/react-devtools-timeline/src/EventTooltip.css b/packages/react-devtools-timeline/src/EventTooltip.css
index bf3862892bd7d..60551c631ef03 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.css
+++ b/packages/react-devtools-timeline/src/EventTooltip.css
@@ -75,7 +75,6 @@
   margin-right: 0.25rem;
 }
 
-.InfoText,
 .WarningText {
   color: var(--color-warning-text-color);
 }
diff --git a/packages/react-devtools-timeline/src/Timeline.css b/packages/react-devtools-timeline/src/Timeline.css
index 9a0d35c818331..977516fdb25fd 100644
--- a/packages/react-devtools-timeline/src/Timeline.css
+++ b/packages/react-devtools-timeline/src/Timeline.css
@@ -8,9 +8,6 @@
   justify-content: center;
 }
 
-.Paragraph {
-  text-align: center;
-}
 
 .ErrorMessage {
   margin: 0.5rem 0;
@@ -35,28 +32,3 @@
   font-size: var(--font-size-sans-large);
   margin-bottom: 0.5rem;
 }
-
-.WelcomeInstructionsList {
-}
-
-.WelcomeInstructionsListItem {
-  display: flex;
-  align-items: center;
-  line-height: 1.5rem;
-  counter-increment: li;
-}
-
-.WelcomeInstructionsListItem::before {
-  content: counter(li);
-  margin-right: 0.5rem;
-}
-
-.WelcomeInstructionsListItemLink {
-  color: var(--color-link);
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.ImportButtonLabel {
-  margin-left: 0.25rem;
-}
\ No newline at end of file

From 07b7b6d60124743d73ae82c201f8abbdef10814f Mon Sep 17 00:00:00 2001
From: Biki-das <bikid475@gmail.com>
Date: Sat, 1 Jul 2023 23:14:55 +0530
Subject: [PATCH 2/2] Fixed wrong CSS class Name

---
 .../src/devtools/views/Components/InspectedElement.js         | 4 +++-
 .../src/devtools/views/Settings/SettingsShared.css            | 3 ---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 0754a2066e31a..8d5f02c1a02f0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -263,7 +263,9 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         <div className={styles.SelectedComponentName}>
           <div
             className={
-              element.isStrictModeNonCompliant ? undefined : styles.Component
+              element.isStrictModeNonCompliant
+                ? styles.StrictModeNonCompliant
+                : styles.Component
             }
             title={element.displayName}>
             {element.displayName}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index dd3f5456c464c..de0b8da9e6f0f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -38,9 +38,6 @@
   height: 0.5rem;
 }
 
-.Select {
-}
-
 .CheckboxOption {
   display: block;
   padding: 0 0 0.5rem;