apply some styles to device page

react-ui/src/components/view/device/device.scss

@@ -10,4 +10,43 @@ tr:hover > td  {
 
 tr:nth-child(2n+1) > td {
     background-color: lighten(map-get($theme-colors, primary) , 38%)
+}
+
+.c-box {
+    padding: 2em !important;
+    padding-top: 1em !important;
+
+}
+
+
+
+.border-right {
+    $border-padding: 2em;
+
+    border-right: 1px solid lighten(map-get($theme-colors, dark), 35%);
+    padding-right: $border-padding;
+
+    & ~ div {
+        padding-left: $border-padding;
+    }
+}
+
+.tab-links {
+    font-size: 1.5em;
+    text-decoration: none;
+    color: map-get($theme-colors, dark);
+
+    &:hover {
+        color: lighten(map-get($theme-colors, primary), 10%);
+    }
+    
+    &:focus {
+        border: none !important;
+        color: lighten(map-get($theme-colors, primary), 10%);
+    }
+
+    &.active {
+        color: map-get($theme-colors, primary);
+        font-weight: 500;
+    }
 }
\ No newline at end of file

react-ui/src/components/view/device/device.view.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { DeviceViewTabs, DeviceViewTabValues } from './deivce.view.tabs';
 import './device.scss';
 import { DeviceViewTable } from './device.view.table';
-import { useParams } from 'react-router-dom';
 
 function DeviceView() {
     const { t } = useTranslation('common');
@@ -15,37 +14,33 @@ function DeviceView() {
     return (
         <div className='m-4 pt-4'>
             <Container className="bg-white rounded c-box" fluid>
-                <Row className='my-2'>
-                    <Col sm={7}><h3 className='text-black-50'>{t('device.title')}</h3></Col>
-                    <Col sm={5}>
+                <Row>
+                    <Col sm={7} className='border-right mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
+                    <Col sm={5} className='mt-4'>
                         <Nav className='justify-content-around'>
-                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA)} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
-                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL)} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
+                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
+                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
                         </Nav>
                     </Col>
 
                 </Row>
 
-                <Row>
+                <Row className='align-items-center'>
                     <Col sm={3}>
-                        <FloatingLabel
-                            controlId="device.search"
-                            label={t('device.search.placeholder')}
-                            className='p-0 mx-2'
-                        >
-                            <Form.Control type="text" placeholder="name@example.com" ref={searchRef} />
-                        </FloatingLabel>
+                    <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
+                        <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
+                    </Form.Group>
                     </Col>
-                    <Col sm={{ span: 2, offset: 2 }}>
+                    <Col sm={{ span: 2, offset: 2 }} className='border-right pt-2'>
                         <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
                     </Col>
                 </Row>
 
-                <Row className='mt-2'>
-                    <Col sm={7}>
+                <Row className='align-items-start'>
+                    <Col sm={7} className='pt-2 border-right'>
                         {DeviceViewTable(searchRef)}
                     </Col>
-                    <Col sm={5} className='border-left border-primary'>
+                    <Col sm={5} className='pt-2'>
                         {DeviceViewTabs(activeTab)}
                     </Col>
                 </Row>

react-ui/src/style/fonts.scss

 @font-face {
-    font-family: inter_font;
-    src: url("./fonts/Inter.ttf");
+    font-family: Inter;
+    src: url("/fonts/Inter.ttf");
 }
 
+
 * {
-    font-family: inter_font;
+    font-family: Inter;
 }
\ No newline at end of file