Merge pull request #1236 from NordicSemiconductor/push-vmzvkpvyrotr

De-bootstrapify some components

Author: datenreisender

Changelog.minor.md

@@ -50,7 +50,7 @@ release the new version.
 - #1216: Sort sources in settings view.
 - #1223: Create log for messages from the renderer process in
   `nrfconnect/logs/renderer.log`.
-- #1235: Move some styling to use Tailwind.
+- #1235, #1236: Move some styling to use Tailwind.
 
 ### Fixed
 

src/launcher/features/about/About.tsx

@@ -6,46 +6,28 @@
 
 import React from 'react';
 import Button from 'react-bootstrap/Button';
-import Card from 'react-bootstrap/Card';
-import Col from 'react-bootstrap/Col';
-import Row from 'react-bootstrap/Row';
 import { app } from '@electron/remote';
 
-import NrfCard from '../../util/NrfCard';
 import WithScrollbarContainer from '../../util/WithScrollbarContainer';
+import Card from '../layout/Card';
 
 const appVersion = app.getVersion();
 
 export default () => (
     <WithScrollbarContainer>
-        <NrfCard>
-            <Row>
-                <Col>
-                    <Card.Title>Version</Card.Title>
-                </Col>
-            </Row>
+        <Card title="Version">
             <p>nRF Connect for Desktop v{appVersion}</p>
-        </NrfCard>
-        <NrfCard>
-            <Row>
-                <Col>
-                    <Card.Title>Documentation</Card.Title>
-                </Col>
-            </Row>
+        </Card>
+        <Card title="Documentation">
             <Button
                 href="https://docs.nordicsemi.com/bundle/nrf-connect-desktop/page/index.html"
                 target="_blank"
                 variant="outline-primary"
             >
                 Open documentation
             </Button>
-        </NrfCard>
-        <NrfCard>
-            <Row>
-                <Col>
-                    <Card.Title>License</Card.Title>
-                </Col>
-            </Row>
+        </Card>
+        <Card title="License">
             <p>Copyright (c) 2015-2024 Nordic Semiconductor ASA</p>
             <p>All rights reserved.</p>
             <p>SPDX-License-Identifier: Nordic-4-Clause</p>
@@ -107,6 +89,6 @@ export default () => (
                 IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
                 THE POSSIBILITY OF SUCH DAMAGE.
             </p>
-        </NrfCard>
+        </Card>
     </WithScrollbarContainer>
 );

src/launcher/features/apps/App/App.tsx

@@ -6,14 +6,14 @@
 
 import React, { useEffect, useRef } from 'react';
 import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
-import Col from 'react-bootstrap/Col';
 import DropdownButton from 'react-bootstrap/DropdownButton';
 import ListGroup from 'react-bootstrap/ListGroup';
-import Row from 'react-bootstrap/Row';
 
 import { OFFICIAL } from '../../../../common/sources';
 import { isInstalled, isUpdatable, isWithdrawn } from '../../../../ipc/apps';
 import formatPublishTimestamp from '../../../util/formatTimestamp';
+import Col from '../../layout/Col';
+import Row from '../../layout/Row';
 import { DisplayedApp } from '../appsSlice';
 import AppIcon from './AppIcon';
 import AppProgress from './AppProgress';
@@ -69,14 +69,20 @@ const App = ({ app }: { app: DisplayedApp }) => {
 
     return (
         <ListGroup.Item ref={itemRef}>
-            <Row noGutters className="py-1">
-                <Col xs="auto" className="d-flex align-items-start my-2 mr-3">
+            <Row noGutters className="tw-flex-nowrap tw-py-1">
+                <Col
+                    fixedSize
+                    noPadding
+                    className="tw-my-2 tw-mr-4 tw-flex tw-items-start"
+                >
                     <AppIcon app={app} />
                 </Col>
-                <Col>
-                    <div className="h8">{app.displayName || app.name}</div>
-                    <div className="small text-muted">{app.description}</div>
-                    <div className="small text-muted-more">
+                <Col noPadding className="tw-w-full tw-flex-initial">
+                    <div>{app.displayName || app.name}</div>
+                    <div className="tw-text-sm tw-text-gray-600">
+                        {app.description}
+                    </div>
+                    <div className="tw-text-sm tw-text-gray-200">
                         {app.source}
                         {isInstalled(app) && <>, v{app.currentVersion}</>}
                         {isInstalled(app) && app.source !== OFFICIAL && (
@@ -99,8 +105,8 @@ const App = ({ app }: { app: DisplayedApp }) => {
                     </div>
                 </Col>
                 <Col
-                    xs="auto"
-                    className="d-flex align-items-center my-3 ml-auto pl-3"
+                    fixedSize
+                    className="tw-my-4 tw-ml-auto tw-flex tw-items-center tw-pr-0"
                 >
                     <ButtonToolbar className="wide-btns">
                         <UpdateApp app={app} />