UIの修正

[96-38]

Issueの番号 / Title

#69

どのように解決したか / How

• リストのレイアウトをconstraint layoutに変更してコンポーネントの位置を調整した
• タブのテキスト色を非選択時に薄い色になるようにした
• 非選択時のタブ背景色を白に変更した
  • [IMO]灰色のままでも良さそうですが非選択時のテキスト色を薄い色にする場合、背景色は白に変更した方がテキストの可読性が上がりそうです。
• 消費ボタンのデザインを変更した

その他 / スクリーンショットなど

スクリーンショット

TODO

• 消費期限をカレンダーで選択した後にテキストで表示するようにする
• 賞味期限ボタン、消費ボタンのデザインを検討する
  • 消費ボタンはAdobeXDで書き出したpngファイルですが、XD上では正常に表示されているにも関わらず、テキスト下部が切れてしまっています。フォントの問題かもしれないのでMacの方に書き出してもらうか、余裕があれば再度作り直した方が良さそうです。
  • [IMO]全体的にフラットなデザインになっているので、消費ボタンのdrop shadowの有無を再検討しても良いと思います。