added css properties for react-phone-input (#2549)

Signed-off-by: msivasubramaniaan <[email protected]>

Signed-off-by: msivasubramaniaan <[email protected]>

Author: msivasubramaniaan

src/webview/cluster/app/clusterView.scss

@@ -0,0 +1,21 @@
+.react-tel-input .flag-dropdown {
+    background-color: var(--vscode-settings-textInputBackground) !important;
+}
+
+.react-tel-input .selected-flag {
+    background: var(--vscode-settings-textInputBackground) !important;
+}
+
+.react-tel-input .country-list .country.highlight {
+    background-color: var(--vscode-list-activeSelectionBackground) !important;
+    color: var(--vscode-list-activeSelectionForeground) !important;
+    border: 0.3px solid;
+    border-color: var(--vscode-focusBorder) !important;
+}
+
+.react-tel-input .country-list .country:hover {
+    background-color: var(--vscode-list-hoverBackground) !important;
+    color: var(--vscode-list-hoverForeground) !important;
+    border: 0.3px solid;
+    border-color: var(--vscode-focusBorder) !important;
+}

src/webview/cluster/app/sandboxView.tsx

@@ -12,6 +12,7 @@ import Tooltip from '@mui/material/Tooltip';
 import PhoneInput from "react-phone-input-2";
 import 'react-phone-input-2/lib/style.css'
 import * as ClusterViewStyles from './clusterView.style';
+import './clusterView.scss';
 
 const useStyles = makeStyles(ClusterViewStyles.useStyles);
 
@@ -246,8 +247,25 @@ export default function addSandboxView(props): JSX.Element {
                         isValid={isValid}
                         disabled={inProgress}
                         containerStyle={{display: 'inline-flex', margin: '20px 10px 20px 10px', width: 'unset'}}
-                        dropdownStyle={{position: 'fixed', margin: '0px 0 10px -1px', textAlign: 'initial'}}
-                        inputStyle={{width: 'unset'}}
+                        dropdownStyle = {{
+                            position: 'fixed',
+                            margin: '0px 0 10px -1px',
+                            textAlign: 'initial',
+                            background: 'var(--vscode-settings-textInputBackground)',
+                            border: '0.5px solid',
+                            borderColor: 'var(--vscode-focusBorder)'
+                        }}
+                        buttonStyle = {{
+                            border: '0.5px solid',
+                            borderColor: 'var(--vscode-focusBorder)'
+                        }}
+                        inputStyle = {{
+                        width: '10rem !important',
+                        background: 'var(--vscode-settings-textInputBackground)',
+                        border: '0.5px solid',
+                        borderColor: 'var(--vscode-focusBorder)',
+                        color: 'var(--vscode-settings-textInputForeground)'
+                        }}
                         />
                         <Button
                             style = {{ margin: '20px 10px 20px 10px' }}

src/webview/cluster/webpack.config.js

@@ -31,14 +31,17 @@ module.exports = {
         loader: "ts-loader",
       },
       {
-        test: /\.css$/,
+        test: /\.(css|scss)$/,
         use: [
           {
             loader: "style-loader",
           },
           {
             loader: "css-loader",
           },
+          {
+              loader: "sass-loader",
+          }
         ]
       },
       {
@@ -67,4 +70,4 @@ module.exports = {
         }]
     })
   ],
-};
+};